33

HTMLファイルにフォント（OpenSymbol）を含める必要があり、フォントファイルはローカルフォルダーにあります（正確な絶対パスを知っています）。@font-face を次のように使用すると:

@font-face {
  font-family: "OpenSymbol";
  src: url("<absolutePath>/OpenSymbol.ttf") format("truetype");
}

Chrome、Opera、Safari では動作しますが、Firefox や IE9 では動作しません。その他の @font-face の使用法は、すべてのブラウザーで問題なく機能します。

ところで、Chrome では次の警告が表示されます。

Resource interpreted as Font but transferred with MIME type application/octet-stream

OS にインストールされていないローカルに保存されたフォントをきれいに含めるにはどうすればよいですか?

編集：

異なる URL のリストが機能しないように思われることがわかりました。URLを最初に配置すると、Chromeはフォントをロードしますが、[...].ttf他の場所に配置するとロードしません!

2回目の編集:

firefox を除くすべてのブラウザーで動作するようにしました。

@font-face { 
  font-family: 'OpenSymbol';
  src: url('file:<path>/openSymbol.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face { 
  font-family: 'OpenSymbolEOT';
  src: url('file:<path>/openSymbol.eot') format('embedded-opentype');
  font-weight: normal;
  font-style: normal;
}
...

その後

.element {
  font-family: OpenType, OpenTypeEOT, [...];
}

とにかく、IE では動作しますが、IE のレンダリング エンジンを使用する Eclipse では動作しません... oO

ところで、firefox にはセキュリティ上の問題が原因で問題があります:ここを参照してください

4

3 に答える 3

17

Web オープン フォント形式のフォント ファイルが 1 つだけ必要です。http://www.fontconverter.orgに移動して、 OpenSymbol.tff to OpenSymbol.woff. 私はクロスプラットフォームの開発者であり、これが問題なく動作することをテストしました:

  1. macOS 10.12.4 (iMac) 上の Safari 10.1 および Firefox 52.0.2
  2. Windows 7 (PC) 上の Internet Explorer 11.0 および Firefox 52.0.1 および Google Chrome 52.0 および Opera 53.0
  3. iOS 10.3.1 (iPhone) の Safari
  4. Android 5.0.2 (Asus タブレット) 上の Chrome 57.0 および Asus Browser 2.0.3

これはcssに入ります：

/* Add the decaration on top */
@font-face { 
font-family: 'OpenSymbol';
src: url('font/OpenSymbol.woff') format('woff');
}
/* in separate css .elements or even the whole body, edit your font properties */ 
body {
font-family: OpenSymbol;
font-weight: normal;
font-style: normal;
..

Embedded OpenType (EOT) フォントファイルは IE9 (2011) と IE10 (2012) でのみ必要なため、気にする必要はありません。Scalable Vector Graphics (SVG) フォントは iOS 5.0 以降不要になったため、気にする必要はありません。

2012 年以降、Web Open Font Format (WOFF) は既知のすべてのブラウザーで完全にサポートされています。Truetype フォント (TTF) は iMac と PC でローカルに使用され、Android と iPhone でもローカルで使用できます。そのため、Web 開発者はしばしばこの間違いを犯し、サイトに WOFF の代わりに TTF を使用します。

于 2017-04-17T16:26:16.450 に答える
3

According to a sample font page from Font Squirrel, Both IE 9 and Firefox require font files to be served from the same domain as the page they are loaded into. So with @font-face, your only option is to find the font file(s) you are trying to use and upload them to the site, and then use code similar to the following:

@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
     url('webfont.woff') format('woff'), /* Modern Browsers */
     url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
     url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Taken from http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

EDIT: One more thing from the Font Squirrel page, if you are using an IIS server, the file types need to be add to the list of MIME types.

于 2012-08-04T23:36:05.367 に答える
3

ブラウザが .ttf ファイルをサポートしていない可能性があります。fontsquirrelの使用を検討してください。必要なすべてのファイル (.ttf、.woff、.svg、.eot) と css が生成され、すべてのブラウザーで動作します。私はいつもそれを使用しています...

于 2012-08-04T21:33:18.213 に答える