16

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

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

ワイド画像: ワイド文字

コード付きの標準ロゴ:標準

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

.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;

}
4

2 に答える 2

39

あなたが探しているのは です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);

少なくとも今のところは、すべてのブラウザで指定する必要があります。

編集：

jsfiddleをリンクするのを忘れていました。

于 2013-03-07T02:55:51.193 に答える
1

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

正しい選択

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

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

于 2013-07-23T09:42:20.177 に答える