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

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

519 html  css  fonts  font-face 

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 

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

440 html  css  fonts  font-face 

@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; }

422 css  http-status-code-404  font-face  woff 

私の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） …

345 ruby-on-rails  sass  asset-pipeline  font-face  assets 

ではCSS3 font-face、同様に含まれる複数のフォントの種類があるttf、eot、woff、svgとはcff。 これらのタイプをすべて使用する必要があるのはなぜですか？ それらが異なるブラウザーに特別である場合、それらの数が主要なWebブラウザーの数より多いのはなぜですか？

299 css  font-face  webfonts 

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

283 google-chrome  font-face 

CSSのみを使用して閉じるボタンを作成したい。 私がこれを行うのは最初ではないと思いますが、クロスブラウザを使用して閉じるボタンのように見えるように、フォントの幅と高さの「x」が同じであることは誰にもわかりますか？

219 css  fonts  font-face 

次のコードは、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 …

194 css  firefox  font-face  file-uri 

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

175 css  font-face 

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

168 html  svg  font-face  mime-types 

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

134 css  firefox  amazon-s3  font-face  cors 

私は@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 

小さなイントラネットアプリケーションを作成している最中ですが、最近購入した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で …

132 internet-explorer  css  internet-explorer-9  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