1

モノスペース フォントを使用している Web サイトがあります。ただし、文字の幅に関しては、ブラウザーによって大きな違いがあります。フォントの幅がまったく同じであることが不可欠です。

試してみましたが、これはブラウザに依存しており、負の値font-weight: bold;を使用して余分な幅を補うことはできません。letter-space

Type Light 3.2 で独自の新しい派生フォントを作成しようとしましたが、これは非常に難しく、特に曲線の文字では変更が困難です。

後ろに絶対divを置いてテキストを2倍にし、2pxの変更のマージンを設定しようとしましたが、これは非常にうまくいきましたが、これの欠点は、多くのdivが必要であるため、大きなサイズを使用するとIE7とIE8が非常に遅くなることですテキスト。

ttf/eot/woff/svg フォントから太字フォントを派生させる (自動的に推奨される) 別の方法はありますか? たとえば、Java でボールド フォントを作成できることは知っていますが、それを新しいフォント ファイルに保存することはできますか? どんな方法でも私のために行います。

4

1 に答える 1

2

CSS3をtext-shadowトリックとして使用できます。

text-shadow: -.5px 0,  0 .5px,  .5px 0,  0 -.5px;

もちろん、これは古いIEでは機能しませんが、グローフィルターを使用できます。

filter: glow(color:black,strength=1);

font-family: monospaceまた、テストしたすべてのブラウザーで、組み込みのを使用した場合、太字の太さは文字の幅を変更しなかったことにも注意してください。したがって、負の値は必要ない場合がありletter-spacingます。

font-weight: bold;


div {
  font-family: monospace;
}
.ie-trick-bold {
  filter: glow(color:black,strength=1);
}
.css3-trick-bold {
  text-shadow: -.5px 0,  0 .5px,  .5px 0,  0 -.5px;
}
.normal-bold {
  font-weight: bold;   
}
<div class="css3-trick-bold">Hello World! (CSS3 trick)</div>
<div class="ie-trick-bold">Hello World! (IE trick)</div>
<div class="normal-bold">Hello World! (default bold)</div>
<div>Hello World! (normal text)</div>

于 2013-01-01T20:25:34.670 に答える