7

シンボルの幅と高さを設定するにはどうすればよいですか?

<span>&gt;</span>

>十分な幅がありません:

span {
    font-family:arial;
    font-size:20px;
}

のようなコードで設定できwidth: 10px; height: 20px;ますか？

4

5 に答える 5

14

font-size を 20px に設定し、transformプロパティを使用scale(.5, 1)して水平方向のスケールを半分にし、垂直方向のスケールをそのままにします。

span {
  font-size:20px;
  transform: scale(.5, 1);
}

またはフィドルを参照してください。

ノーマル、ストレッチ

于 2013-06-26T09:13:34.297 に答える
7

>キャラクターです。font-sizeとfont-stretchでサイズを調整できます(サポートは限定的ですが)。

幅はフォント ファミリによっても異なることに注意してください。

(実際に矢印が必要な場合は、大なり記号を使用しないように注意してください。)

于 2013-06-26T08:32:59.767 に答える
2

いいえ、幅と高さを別々に変更することはできません。これには正当な理由があります。フォント (およびこれには記号も含まれます) は引き伸ばされるようには作られていません。これを行うと、歪んだ醜いシンボルになり、すべてのタイポグラフィの専門家が地獄のように叫ぶことになります. これが、1 つの値しか設定できない理由です。縦横比は常に同じままです。それは私たち全員の安全のためです。

于 2013-06-26T08:46:41.350 に答える
2

文字の幅を設定することはできませんが...

少しずさんな解決策: 他のフォントを試してみませんか? Google Fonts (「ワイド」フィルターの下)でいくつかのワイド フォントを見つけることができ、次のようなものを作成できます。

span.wide {
    font-family:"wide font";
    font-size:20px;
}

長所:クロスブラウザー、最小限のコード、画像なし。
短所:多くのフォントを使用すると、Web ページの速度が低下する可能性があります。

于 2013-06-26T09:10:31.643 に答える
-4

CSSで生成されたコンテンツを使用してシンボルを複製し、コンテンツの中心から少しずらして配置します...実際には、ここで生成されたコンテンツをさまざまな方法で使用して、目的のソリューションを実現できます。Unicode 文字を使用して大なり記号を再適用し、目的のサイズに移動するだけです。 

  
span{width:75px; height:75px; text-align:left; font-size:75px; position:relative}
span:before,span:after{color:#008000; font-size:75px; font-weight:900; text-shadow:1px 1px 2px #000; position:absolute; width:75px; height:75px; top:0; z-index:100}
span:before{content:"\003C"; left:-3px}
span:after{content:"\003C"; right:-3px}

質問に示されているのと同じマークアップを使用します。実際のデモ: http://jsfiddle.net/jalbertbowdenii/khAr3/1/

于 2013-06-26T08:33:37.637 に答える