[解決済み] HTMLサイトにカスタムフォントをインストールする方法
2022-03-08 10:02:06
質問
私はフラッシュやPHPを使用していません - そして、私は単純なHTMLレイアウトにカスタムフォントを追加するように頼まれました。
ローカルにダウンロードしたのですが、これを実現するための簡単なCSSのトリックはありますか？
どのように解決するのですか？
はい、@font-faceというCSSの機能を使うことができます。 CSS3では正式に承認されただけですが、CSS2では提案・実装されており、IEではかなり以前からサポートされています。
CSSでこのように宣言するのです。
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
あとは、他の標準フォントと同じように参照すればいいだけです。
h3 { font-family: Delicious, sans-serif; }
では、この場合。
<html>
<head>
<style>
@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>
そして、JUNEBUG.TFFをhtmlファイルと同じ場所に置くだけでいいのです。
からフォントをダウンロードしました。 dafont.com のウェブサイトをご覧ください。
関連
-
[解決済み】divの高さを画面の残りスペースで埋めるようにする
-
[解決済み] このCSSでInline-blockが正しく動作しないのはなぜですか？
-
[解決済み] HTMLファイルへのリンクは可能ですか？
-
[解決済み] ホバー時に背景画像を暗くする
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] HTML5のlocalStorageにオブジェクトを格納する方法は？
-
[解決済み] CSSでテキストや画像の背景を透明にするには？
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] Webサイトに非標準のフォントを追加するには？
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか？
最新
-
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 実装 サイバーパンク風ボタン