問題タブ [woff]

次の@font-faceルールを定義しました。

フォント ファイルにいくつかのバグがあったため、修正しましたwoff。現在、フォントが正しいかどうかをテストする必要があります。

問題は、Google Chrome がttfデフォルトで使用してい@font-faceて、実行時に変更できないことです。また、パイプラインが複雑なため、サーバー上の CSS を変更することもできません。

ブラウザに特定のフォント ファイル タイプを使用させることはできますか?

以前の質問で、「 woff2 」形式はMicrosoft Edgeでは機能しないと指摘されました。したがって、Web サイトを Microsoft Edge で適切に表示するには、@font-face の代替構文を使用する必要があります。

オリジナルCSS

推奨される CSS

だから私がやろうとしているのは、たとえば「Dosis」の他のすべての形式 (truetype、woff など) を見つけることです..

http://webfonts.azurewebsites.net/?fontname=Dosis Dosis の 400 ウェイト バージョンしか提供されません。

Dosis の正しいバージョンを必要な形式で入手できる他の方法をご存知ですか?

4.3 のような平均評価が与えられ、スター アイコン (4 つの完全な星、部分的に塗りつぶされた 5 番目の星) に 4.3 の平均評価を表示するロジックを構築する必要があります。最大評価数は 5 です。stackoverflow の例を参照して jsfiddle を作成しましたが、ドラフト フィドルで部分的な星が得られず、結果として星全体が得られます。私の JSFiddle スクリーンショット

JSFiddle リンク: https://goo.gl/sz1YIJ 親切なアドバイス。

今まで、私はポール アイリッシュの防弾フォント フェース構文を使用してきました

しかし、caniuse での.woffおよび .woff2 ファイルのサポートを調べたところ、woffは IE9+ でサポートされていると書かれています。このトピックに関するほとんどの記事は 2009 年頃のもので、この記事の執筆時点では 7 年前です。woff がこれほど広くサポートされているのに、本当に ttf、otf、eot、svg を宣言し続ける必要があるのでしょうか?

私たちは、何千ものフォントを備えた大規模な印刷アプリに取り組んでいます。歴史的に、これらは Flash を使用して表示されてきましたが、明らかに、現在 HTML5 を調査しています。

WOFF フォントのサブセットは、垂直方向に最大で数ピクセル下にずれて表示されます。これは、コンバーターに依存していないように見えます。(12 回以上の WOFF 変換を試しましたが、すべて同じ位置に表示されます。)

影響を受けるフォントには明らかに、WOFF が OTF / TTF / SWF の位置から垂直に下に表示される原因となるものがあります。誰が何を説明するかもしれない参照を私に指摘できますか?

ありがとう、G

ETA: 以下のコメントに従って、これを編集して MCVE を含めました。

選択された例は、ClarendonNo1URW-Lig フォントがブラウザー外で同じフォントを使用すると予想されるよりも低い数のピクセルを表示する方法を示しています。

同じフォントを使用して InDesign から抽出された PNG と比較して、問題のあるフォントで WOFF を表示する HTML ページのスクリーンショット

リンクされたスクリーンショットの青い四角形は、最後の行のベースラインと最初の行の上昇の間にフォントを問い合わせたときに予想される境界を示しています。これは、InDesign の表示位置に一致するようにするためです。

すべてのポジショニング値は、これらのフォントのアセント/ディセント値から明示的に計算され、1000 を超えるフォントに対して検証されています。90% をはるかに超えるフォントでピクセル パーフェクトですが、一部 (例など) は垂直方向に下方向にずれています。

さらに、この現象はさまざまなブラウザーで一貫しているように見えます - 同様の動作が FireFox、Edge、Opera、Chrome で観察されています...

これはコンバーターに依存しているようには見えません - オンライン ttf から woff サービス、TransType などの購入したソフトウェアへのコンバーターをほぼ 12 種類試しました。WOFF を元の TTF または OTF (該当する場合) と交換しても問題は解決しません。そのため、おそらく元のフォント ファイル自体に含まれる何かが、ブラウザに下に表示するように指示しているのです。しかし、同じことを考慮して何をどのように照会するのかわかりません。

問題を表示する HTML ページのサンプルを以下に示します。lineheight 0 とスパンの絶対配置の使用は、ブラウザー レンダラー固有の丸め効果の影響を排除することです。そうしないと、ピクセル パーフェクトなフォント レイアウトの試みが嘲笑されます。

すべてのアセットが webpack にバンドルされている React.js ベースの chrome 拡張機能を開発しています。開発時（を使用）、Chrome にからファイルをwebpack-dev-serverロードすることに成功しました。これは私の開発 webpack 設定のローダーの一部です:.wofflocalhost:3000

開発用の chrome 拡張機能には、(とりわけ) 次の権限があります。

font-src 'self' http://localhost:3000 https://localhost:3000;

これは問題なく動作します。react-faを使用して font-awesome を次のように使用できます。

<Icon name="eye" size="2x" />

ただし、webpack-dev-server の使用を停止し、実際のバンドルをビルドして Google chrome 拡張機能 (同じローダーを使用)としてインポートするとすぐに、コンソールに次のエラーが表示され始めます。

私のChrome拡張機能のマニフェスト権限は適切に設定されていると思います：

font-src 'self';

しかし、何らかの理由.woff2で、少なくともそのアドレスではなく、ファイルがバンドル内にないようです。bundle/build フォルダーを確認したところ、/build/js/926c93d201fe51c8f351e858468980c3.woff2.

ファイルがアドレスで実際にアクセス可能であることを確認するにはどうすればよいchrome-extension://jboakcijpodokbkfeooiffmbbmlfobnl/926c93d201fe51c8f351e858468980c3.woff2ですか?

サイトを閲覧すると、すべてのフォントが正しく表示されています。ページを印刷すると、プレビューと対応する出力はすべて Times New Roman になります。これが私のCSSルールです：

これが発生していることに気付きました。この動作は、IE、Firefox、Chrome などのどのバージョンにも表示されません。検索してみましたが、印刷時にこれに関連するものは見つかりませんでした。Edge が woff2 をサポートしていないなどのことだけです。

ここでは正しくレンダリングされています:

これは印刷プレビューです。これは、PDFとして印刷/保存する方法でもあります。

ええ、私はそれが尋ねられ、再び尋ねられている質問であることを知っています. 宿題をしたと思いたいのですが、Web サーバーからフォントを取得していないブラウザーはまだありません (ログによると)。

CSS:

テスト ページは、私のテスト サイト here にあります。選択肢もアイデアも尽きたので、最後の手段としてここで質問することにしました。