web-dev-qa-db-ja.com

ローカルファイルを指す@ font-face URL

フォント（OpenSymbol）をhtmlファイルに含める必要があり、フォントファイルはローカルフォルダーにあります（正確な絶対パスを知っています）。次のように@ 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のリストが機能していないようです！ Chrome [...].ttfそもそもURLですが、それが他の場所にある場合はそうではありません！

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では動作しません... o.O

ところで、Firefoxにはセキュリティの問題があるため問題があります： こちらを参照

htmlcssfontsfont-face
29
Cedric Reichenbach

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. Internet Explorer 11.0およびFirefox 52.0.1およびGoogle Chrome 52.0およびOpera 53.0 on Windows 7（PC）
  3. IOS 10.3.1上のSafari（iPhone）
  4. Chrome 57.0およびAsus Browser 2.0.3 on Android 5.0.2（Asusタブレット）

これは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;
..

IE9（2011）およびIE10（2012）にのみ必要なため、Embedded OpenType（EOT）フォントファイルを使用する必要はありません。スケーラブルベクターグラフィックス（SVG）フォントを気にする必要はありません。iOS5.0以降は必要ないためです。

2012年以降、Web Open Font Format（WOFF）はすべての既知のブラウザーで完全にサポートされています。 Truetype Fonts（TTF）はiMacとPCでローカルで使用され、AndroidおよびiPhoneでもローカルで使用できます。そのため、Web開発者はWOFFの代わりにTTFを使用して、地点。

9
Geert Jan

Font Squirrelのサンプルフォントページによると、IE 9とFirefoxでは、フォントファイルは、ロード先のページと同じドメインから提供される必要があります。したがって、@ font-faceでは、唯一のオプションは、使用しようとしているフォントファイルを見つけてサイトにアップロードし、次のようなコードを使用することです。

@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 */
}

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax から取得

編集：Font Squirrelページからもう1つ、IISサーバーを使用している場合、MIMEタイプのリストにファイルタイプを追加する必要があります。

3
Greg Rozmarynowycz

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

2
Pevara