web-dev-qa-db-ja.com

iPad / iPhoneでCSS @ font-faceを使用する

CSSのfont-face属性をカスタムフォントで使用しようとしています。

@font-face {
   font-family: "Handvetica";
   src: url("Handvetica.eot"); 
   src: url("Handvetica.ttf") format("truetype"),
     url("Handvetica.otf") format("opentype"), 
     url("Handvetica.woff") format("woff"),
     url("Handvetica.svg#Handvetica") format("svg");
}

ff、safari＆chromeで正しく動作します。

web上の複数のサイトでは、iOsデバイス（iPod/iPhone/iPad）でfont-faceを使用するには、svgフォントが必要であると述べています。フォントは https://onlinefontconverter.com を使用して変換され、すべての形式があります。

svgフォントはiOSには表示されません。誰かがそれを機能させる方法を知っていますか？また、svg url宣言の＃の正しい構文は何ですか？それは何の略ですか？

ありがとう。

iphonecssipadfontssvg
16
Natti Baron

これは古い質問ですが、まだ誰も答えていないようで、以前も同じ問題を抱えていました。

SVG URLの後の＃はSVGフォントのIDを示し、＃の後の文字列がSVGフォントのIDと一致しない場合は機能しません。 SVGファイルを開くと、次のようなタグが表示されます。

_<font id="webfontSRj8j0PE" horiz-adv-x="1058" >
_

これはBEBASフォント用ですが、たとえばHandveticaフォント用の場合は、url("Handvetica.svg#webfontSRj8j0P") format("svg")と入力する必要があります。

26
TheJF

それはあなたが使っているコンバーターかもしれません-あるいはiPadキャッシングかもしれません。世界で最高のフォントサイト：

http://www.fontsquirrel.com/

正しいフォントフェイスキットを生成し、一連のフォントを提供します。独自のフォント（ライセンスが許可されている場合）を送信すると、フォントフェイスキットが作成されます。これには、TTF、Woof、SVG、OTFが含まれます。

CSS、フォント、例などすべてを圧縮してダウンロードします。

いつも私のために働いた。

7
Glycerine

FontAwesomeを使用していましたが、同じ問題が発生しました。問題は、.svg＃識別子が実際に.svgファイルにあるものと一致しないことです。

ファイルには次のように表示されます。<font id="FontAwesomeRegular" horiz-adv-x="1843" >

アイコンが正方形として表示されないようにするには、font-awesome.cssファイルのこの行を変更します

この行を変更する：

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
  font-weight: normal;
  font-style: normal;
}

この行に

@font-face {
  font-family: "FontAwesome";
  src: url('../font/fontawesome-webfont.eot');
  src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'),
  url('../font/fontawesome-webfont.woff') format('woff'),
  url('../font/fontawesome-webfont.ttf') format('truetype'),
  url('../font/fontawesome-webfont.svg#FontAwesomeRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}
2
Evan R.

フォントフォーマットを変換するための専用ツールであるTransTypeは、ワンクリックで@ fontweb-fontファイルを生成することもできます。 fontsquirrelとは異なり、これはラテン語フォントとアラビア語などの非ラテン語フォントの両方で機能します。 http://www.fontlab.com/font-converter/transtype/ ただし、これらの@fontsを使用しているページは、デスクトップブラウザとipad ios8で機能するようですが、iphoneioS8では機能しません。

0
Valavel

サーバーである可能性があります。 SVGを機能させるには、SVGmimeタイプを設定する必要がある場合があります。

 image/svg+xml
0
fitz0019

また、svg url宣言の＃の正しい構文は何ですか？それは何の略ですか？

これは、指定されたファイル内の特定の<font>または<font-face>要素への参照です。同じsvgファイル内にsvgフォント/ font-faceをいくつでも含めることができますが、1つしかないのが最も一般的です。

0
Erik Dahlström