しばらくの間 SIFR 3.0 を使用してきましたが、font-size が正しく機能していないようです。SIFR の背後にある最も基本的な概念を理解しています。ページを読み込むと、SIFR が実行されます。HTML でレンダリングされたフォントのサイズを計算してから、そのサイズにほぼ等しい Flash ムービーに置き換えます。このため、SIFR フォントのサイズにできるだけ一致するように HTML フォントのスタイルを設定する必要があります。
これら2つのフォントサイズを一致させるようにスタイルを設定しようとすると、常に問題が発生します。Helvetica Neue Lt の SIFR フォントを約 32px で使用したいとします。HTML に相当するものは、約 36px の Arial Narrow のようなもので、文字間隔が負になっています。だからここに私がすることがあります。
sifr.css に次のように記述します。
@media screen {
.sIFR-active h1 {
visibility: hidden;
z-index: 0 !important;
font-size: 36px;
}
}
これで、必要なサイズのデフォルトの HTML フォントが取得されました。ここで、フラッシュ SIFR フォント サイズを更新する必要があります。そこで、sifr-config.js に移動して、次のように記述します。
sIFR.replace(HelveticaNeueThinCond, {
selector: 'h1',
css: '.sIFR-root { color: #762123; font-size: 32px; line-height: 1em; }',
transparent: true
});
そのため、現在、すべてがうまく機能しています。それは、私の h1 テキストが複数の行を折り返すまでです。何らかの理由で、テキストが折り返されると、最初の行のみが表示されます。高さの計算が間違っているようです。いくつかのテストを実行したため、これは非常に奇妙です。HTML レンダリングされたテキストが適切なサイズであることを確認するために、「sIFR-active h1」から「visibility: hidden」を削除しました。つまり、2行かかります。ただし、Flash がこのテキストを置き換えると、1 行のテキストの最小の高さが与えられます。奇数。
このラッピングの問題を解決する唯一の方法は、「font-size: 32px;」を削除することでした。sifr-config の "sIFR.replace(HelveticaNeueThinCond" から。そのときに遭遇する問題は、sifr.css で設定された font-size を継承することです。問題は、HTML テキストが SIFR テキストよりも大きいことです。 SIFR テキストが大きな空白を残す前に、HTML テキストが新しい行に折り返されます。
では、ラッピングを失わずに 2 つの異なる font-size (HTML テキスト用と SIFR 用) を設定するにはどうすればよいでしょうか。
を正常に使用できたのは、Web セーフ フォントに非常に似ている SIFR フォントを使用していて、同じ font-size 属性を共有できる場合だけです。
ありがとう
ありがとうマーク。説明したように、sIFR.replace から font-size を削除すると、デフォルトで .sIFR-active で宣言された font-size が使用されます。理由により、2 つの異なるフォント サイズを宣言しています。sIFR.replace の font-size を 32px に、sIFR-active の font-size を 26px にします。このようにして、それらは可能な限り一致します。フラッシュ フォント (sifr.replace) を HTML フォント (sifr-active) とは異なるサイズにする方法はありませんか?
それらを同じフォントサイズにすることは必須ですか? それが本当ならあまり意味がありません。2 つのフォントを微調整して、同じ文字間隔/行を占めるにはどうすればよいでしょうか?