タグ付けされた質問 「font-face」

@ font-faceは、Webページ内の埋め込みフォントの定義を許可するCSSルールです。

18
非標準フォントをWebサイトに追加するにはどうすればよいですか?
画像、Flash、またはその他のグラフィックを使用せずにWebサイトにカスタムフォントを追加する方法はありますか? たとえば、私は結婚式のウェブサイトで作業していて、そのテーマに適したフォントをたくさん見つけました。しかし、そのフォントをサーバーに追加する正しい方法が見つかりません。そして、CSSでそのフォントをHTMLに含めるにはどうすればよいですか?これはグラフィックなしで実行できますか?
519 html  css  fonts  font-face 

7
同じフォントに複数のフォントファイルを追加する方法
MDCページで@ font-face CSSルールを探していますが、 1つ取得できません。太字、斜体、太字+斜体の個別のファイルがあります。3つのファイルすべてを1つの@font-faceルールに埋め込むにはどうすればよいですか?たとえば、私が持っている場合: @font-face { font-family: "DejaVu Sans"; src: url("./fonts/DejaVuSans.ttf") format("ttf"); } strong { font-family: "DejaVu Sans"; font-weight: bold; } ブラウザーは太字に使用するフォントを認識しません(そのファイルはDejaVuSansBold.ttfであるため)。そのため、デフォルトではおそらく必要のないフォントに設定されます。特定のフォントで使用しているさまざまなバリエーションをすべてブラウザに通知するにはどうすればよいですか?
454 fonts  css  font-face 

2
Webブラウザーでの.otfフォントの使用
オンラインでフォントの試用を必要とするWebサイトで作業しています。使用しているフォントはすべて.otfです。 フォントを埋め込み、すべてのブラウザで機能させる方法はありますか? そうでない場合、他にどのような選択肢がありますか?
440 html  css  fonts  font-face 

14
@ font-faceがwoffファイルで404エラーをスローするのはなぜですか?
@font-face私の会社のサイトで使用していますが、機能しているか見栄えが良いです。FirefoxとChromeを除いて、.woffファイルに404エラーがスローされます。IEはエラーをスローしません。フォントをルートに配置しましたが、cssフォルダー内のフォントを試し、フォントの完全なURLを指定しました。これらのフォントをcssファイルから削除すると、404が表示されないので、構文エラーではないことがわかります。 また、fontsquirrelsツールを使用して@font-faceフォントとコードを作成しました。 @font-face { font-family: 'LaurenCBrownRegular'; src: url('/laurencb-webfont.eot'); src: local('☺'), url('/laurencb-webfont.woff') format('woff'), url('/laurencb-webfont.ttf') format('truetype'), url('/laurencb-webfont.svg#webfontaaFhOfws') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FontinSansRegular'; src: url('/fontin_sans_r_45b-webfont.eot'); src: local('☺'), url('/fontin_sans_r_45b-webfont.woff') format('woff'), url('/fontin_sans_r_45b-webfont.ttf') format('truetype'), url('/fontin_sans_r_45b-webfont.svg#webfontKJHTwWCi') format('svg'); font-weight: normal; font-style: normal; }

12
Railsアセットパイプラインでのフォントの使用
私のScssファイルでいくつかのフォントを次のように構成しています: @font-face { font-family: 'Icomoon'; src: asset-url('icoMoon.eot?#iefix', font) format('embedded-opentype'), asset-url('icoMoon.woff', font) format('woff'), asset-url('icoMoon.ttf', font) format('truetype'), asset-url('icoMoon.svg#Icomoon', font) format('svg'); } 実際のフォントファイルは/ app / assets / fonts /に保存されています config.assets.paths << Rails.root.join("app", "assets", "fonts")application.rbファイルに追加しました コンパイルCSSソースは次のとおりです。 @font-face { font-family: 'Icomoon'; src: url(/assets/icoMoon.eot?#iefix) format("embedded-opentype"), url(/assets/icoMoon.woff) format("woff"), url(/assets/icoMoon.ttf) format("truetype"), url(/assets/icoMoon.svg#Icomoon) format("svg"); } しかし、アプリを実行すると、フォントファイルが見つかりません。ログ: 2012-06-05 23:21:17 +0100配信されたアセット/icoMoon.ttf-404が見つかりません(13ms) …


18
この「遅いネットワークが検出されました…」というログがChromeに表示されるのはなぜですか?
これinfo logがGoogle Chrome Dev(バージョン55.0.2883.18 dev)に登場し始めたことに気づきましたが、その理由は想像できません。 遅いネットワークが検出されました。ロード中に代替フォントが使用されます:http://font-path.extension ` font-faceローカルページやChrome拡張機能を含め、を使用するすべてのウェブサイトに表示されます。

16
「X」のUnicode文字のキャンセル/クローズ?
CSSのみを使用して閉じるボタンを作成したい。 私がこれを行うのは最初ではないと思いますが、クロスブラウザを使用して閉じるボタンのように見えるように、フォントの幅と高さの「x」が同じであることは誰にもわかりますか?
219 css  fonts  font-face 

28
CSS @ font-faceはFirefoxでは機能しませんが、ChromeおよびIEでは機能します
次のコードは、Google Chromeベータ版とIE 7で動作します。ただし、Firefoxにはこの問題があるようです。私のCSSファイルがどのようにインクルードされているかが問題であると思っています。クロスドメインのインポートに関してFirefoxがあまり友好的ではないためです。 しかし、これはすべて静的HTMLであり、クロスドメインの問題はありません。 landing-page.htmlで、次のようなCSSインポートを実行します。 <link rel="stylesheet" href="../css/main.css" type="text/css" media="screen, projection" /> main.css内に、次のような別のインポートがあります。 @import url("reset.css"); @import url("style.css"); @import url("type.css"); そしてtype.css内で私は次の宣言をしています: @font-face { font-family: "DroidSerif Regular"; src: url("font/droidserif-regular-webfont.eot"); src: local("DroidSerif Regular"), url("font/droidserif-regular-webfont.woff") format("woff"), url("font/droidserif-regular-webfont.ttf") format("truetype"), url("font/droidserif-regular-webfont.svg#webfontpB9xBi8Q") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: "DroidSerif Bold"; src: url("font/droidserif-bold-webfont.eot"); src: local("DroidSerif …

8
CSSを使用してカスタムフォントを使用していますか?
(通常のArial、Tahomaなど以外の)サイトでカスタムフォントを使用している新しいWebサイトをいくつか見ました。 また、かなりの数のブラウザをサポートしています。 どうやってそれを行うのですか?また、可能であれば、フォントをダウンロードするための無料のアクセス権を人々に与えないようにします。
175 css  font-face 

1
フォントが埋め込まれたSVG画像の正しいMIMEタイプ
これは通常のSVG MIMEタイプです。 image/svg+xml そしてそれは素晴らしい働きをします。ただし、SVGフォントを埋め込むと、chromeでは画像の代わりにフォントが返されるため、MIMEタイプが正しくないことがわかります。 ユニバーサルMIMEタイプはありますか?クロムは間違っていますか?されてapplication/svg+xml何とか受け入れ? これはまだHTML5の灰色の領域だと思いますが、ここの誰かが知っているかもしれません。

12
Amazon S3 CORS(クロスオリジンリソースシェアリング)およびFirefoxクロスドメインフォントのロード
Firefoxが現在のWebページとは異なるオリジンからフォントをロードしないという長い間問題がありました。通常、フォントがCDNで提供されるときに問題が発生します。 他の質問でさまざまな解決策が提起されました: CSS @ font-faceはFirefoxでは機能しませんが、ChromeおよびIEでは機能します Amazon S3 CORSの導入に伴い、CORSを使用してFirefoxのフォント読み込みの問題に対処するソリューションはありますか? 編集:S3 CORS構成のサンプルを見ていただければ幸いです。 edit2:私は実際にそれが何をしたのか理解せずに実用的な解決策を見つけました。構成とAmazonの構成の解釈で発生するバックグラウンドマジックについての詳細な説明を誰かが提供できれば、それに対する報奨金を上げたnzifnabのように、それは大いに感謝されます。

3
CSS @ font-face-「src:local( '☺')」はどういう意味ですか?
私は@font-face初めて使用して、fontsquirrelからフォントキットをダウンロードしました 彼らが私のCSSに挿入することを推奨するコードは次のとおりです。 @font-face { font-family: 'junctionregularRegular'; src: url('Junction-webfont.eot'); src: local('☺'), url('Junction-webfont.woff') format('woff'), url('Junction-webfont.ttf') format('truetype'), url('Junction-webfont.svg#webfontoNEpZXy2') format('svg'); } さて、にこにこ顔が困ってます。しかし、src内のURLの数もそうです-なぜそれらはそれほど多くのファイルを推奨し、ページがレンダリングされるときにそれらすべてがブラウザーに送信されるのですか?.ttf以外をすべて削除することに害はありますか?
133 css  font-face 

18
AdobeフォントをIE9のCSS3 @ font-faceで動作させる
小さなイントラネットアプリケーションを作成している最中ですが、最近購入したAdobeフォントを使用しようとしました。私が知らされたように、私たちの場合、それはライセンス違反ではありません。 フォントの.ttf / .otfバージョンを.woff、.eot、.svgに変換し、すべての主要なブラウザーをターゲットにしました。私が使用した@ font-face構文は、基本的にFont Springの防弾構文です。 @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot'); src: url('myfont-webfont.eot?#iehack') format('eot'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } HTTPヘッダーを変更し(Access-Control-Allow-Origin = "*"を追加)、クロスドメイン参照を許可しました。FFとChromeでは完全に機能しますが、IE9では次のようになります。 CSS3111: @font-face encountered unknown error. myfont-webfont.woff CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable. myfont-webfont.ttf フォントを.ttf / .otfから.woffに変換するときに、.afmファイルも取得されることに気付きましたが、それが重要かどうかはわかりません... それを解決する方法はありますか? [編集] -IIS 7.5で …

2
複数のfont-weights、1つの@ font-faceクエリ
私はKlavikaフォントをインポートする必要があり、複数の形状とサイズでそれを受け取りました: Klavika-Bold-Italic.otf Klavika-Bold.otf Klavika-Light-Italic.otf Klavika-Light.otf Klavika-Medium-Italic.otf Klavika-Medium.otf Klavika-Regular-Italic.otf Klavika-Regular.otf 次に、クエリでを@font-face定義している-queryを1つだけ使用してCSSにインポートできるかどうかを知りたいと思いweightます。クエリを8回コピー/貼り付けしたくない。 したがって、次のようなもの: @font-face { font-family: 'Klavika'; src: url(../fonts/Klavika-Regular.otf), weight:normal; src: url(../fonts/Klavika-Bold.otf), weight:bold; }
118 css  fonts  font-face 

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.