[解決済み] CSSを使用してフォント.ttfを含めるには?
2022-04-22 09:11:55
質問
私のコードに問題があります。なぜなら、私は自分のページにグローバルフォントを含めたいと思い、.ttfファイルをダウンロードしました。そして、私は私のメインCSSにそれを含めるが、私のフォントは変更されません。
以下は私の簡単なコードです。
@font-face {
font-family: 'oswald';
src: url('/font/oswald.regular.ttf');
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin:0;
padding:0;
border:0;
font-size:100%;
font:inherit;
font-family: oswald;
vertical-align:baseline
}
どこで間違ったのかわかりません。助けていただけませんか?ありがとうございます。
解決方法は?
ウェブフォント用の.ttfファイルを提供するだけでは、クロスブラウザ対応として十分ではありません。現時点での最適な組み合わせは、.ttfファイルと.ttfファイルの組み合わせです。
@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 */
}
このコードは、ウェブフォント用に .eot, .woff, .ttf, svg 形式があることを前提にしています。この処理をすべて自動化するには、: Transfonter.org .
また、最近のブラウザは.woffフォントに移行しているので、おそらくこれも可能でしょう : :
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}
詳しくはこちら: http://css-tricks.com/snippets/css/using-font-face/
対応ブラウザを探す : fontfaceを使用できますか?
関連
-
[解決済み] textareaのresizableプロパティを無効にするにはどうしたらよいですか?
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] CSSの親セレクタはありますか?
-
[解決済み] CSSでcellpaddingとcellspacingを設定する?
-
[解決済み] CSSでテキストや画像の背景を透明にするには?
-
[解決済み] Sublime Text 2を使ってHTMLコードを再フォーマットするにはどうしたらいいですか?
-
[解決済み] WebSocketとサーバー送信型イベントの比較/EventSource
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか?
-
[解決済み] localStorage、sessionStorage、session、cookieの違いは何ですか?
-
[解決済み】HTML5入力のプレースホルダの色をCSSで変更する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Uncaught TypeError: document.getElementsById は関数ではありません。
-
[解決済み] HTMLのテーブルからボーダーを完全に削除する方法
-
[解決済み] slackのチームIDやチャンネルIDを調べる最も簡単な方法は何ですか?
-
[解決済み] HTMLとCSSによるテーブルスクロール [重複]について
-
[解決済み] CSSでdivのアスペクト比を維持する
-
[解決済み] ローカルストレージとCookieの比較
-
[解決済み] hr要素の色を変更する
-
[解決済み] テーブル内のテキストアラインクラス
-
[解決済み] CSS背景のストレッチとスケール
-
[解決済み] 親ディバイスの高さを指定せずに、子ディバイスの高さを100%にする方法は?