web-dev-qa-db-ja.com

CSSで文字幅を設定する

私はcssでシンプルなロゴをデザインする必要があり、文字サイズ以外はすべて問題ありません。要件は、verdanaフォントを使用することですが、図に示すようにワイド文字を使用します。ただし、現在のコードでは狭く見えます。とにかく画像を使用せずにこの動作を実現する方法はありますか？

私は文字の間隔を探しているのではなく、文字自体が設定された数のピクセルを占めるようにする方法を探しています。たとえば、文字tのフォントサイズ（高さ）を30pxにし、標準の幅を2倍にしたいとします。

ワイド画像： widecharacters

コード付きの標準ロゴ： Standard

ロゴの現在のフォーマットは次のとおりです。

.brand {
    color: white;
    display: block;
    float: left;
    font-size: 40px;
    font-weight: 200;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 27px 20px 13px 20px;

    letter-spacing:2px;
    text-transform: full-width;

    background: #083D68;

    -moz-border-radius-topleft: 10px;
    -webkit-border-top-left-radius: 10px;
     border-top-left-radius: 10px;
    -moz-border-radius-bottomright: 10px;
    -webkit-border-bottom-right-radius: 10px;
    border-bottom-right-radius: 10px;

    -moz-box-shadow: inset 4px -4px 13px 0 #333;
    -webkit-box-shadow: inset 4px -4px 13px 0 #333;
    box-shadow: inset 4px -4px 13px 0 #333;

}
csscss3webfontsgraphical-logo
14
Kiran

あなたが探しているのはtransform:scale(x, y)です。例えば：

-webkit-transform:scale(2.0, 1.0);
-moz-transform:scale(2.0, 1.0);
-ms-transform:scale(2.0, 1.0);
-o-transform:scale(2.0, 1.0);
transform:scale(2.0,1.0);

少なくとも今のところ、すべてのブラウザに対してそれを指定する必要があります。

編集：

リンクするのを忘れた my jsfiddle 。

34
Austin Mullins

コード例は、Verdanaの重み700のようには見えません。

正しい選択

font-family： 'Verdana'; font-weight：700;

少なくともVerdanaがインストールされているシステムでは、正しい結果が得られます。

2
Sascha