[解決済み] Googleフォントのダウンロードとそれを使用するオフラインサイトの設定
2022-04-27 09:12:59
質問
あるテンプレートで、次のようなGoogleフォントを参照しています。
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
ダウンロードし、常時オフラインで動作している私のページで使用するように設定するにはどうすればよいですか?
どのように解決するのですか?
Google Fontsにアクセスするだけです。 http://www.google.com/fonts/ をクリックし、気に入ったフォントをコレクションに追加して、ダウンロードボタンを押してください。そして、@fontfaceを使って、このフォントをあなたのウェブページに接続するだけです。 ちなみに、あなたが使っているリンクを開くと、@fontfaceの使用例が表示されます。
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300
例として
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300;
src: local('Open Sans Light'), local('OpenSans-Light'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTaRDOzjiPcYnFooOUGCOsRk.woff) format('woff');
}
URLアドレスをダウンロードしたフォントファイルのローカルリンクに変更するだけです。
もっと簡単にできますよ。
リンク先のファイルをダウンロードするだけです。
http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300
opensans.cssとかいう名前にしてください。
そして、url()のリンクを、フォントファイルのパスに変更するだけです。
そして、例の文字列を置き換える。
<link href='opensans.css' rel='stylesheet' type='text/css'>
関連
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル]cssの位置固定コードで左右2重の位置決め
-
[CSSチュートリアル】CSSカウンターを使った数字の並びの美化方法
-
[css3] scss変数の値を実行時に変更するcss3 var()の使用方法を説明します。
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[CSSチュートリアル】タイトルを上部に配置するスティッキーレイアウトを実現するためのCSS
-
[CSSチュートリアル]CSS気まぐれボーダーアニメーション効果
-
[CSSチュートリアル】よく使われるnth-childセレクタをまとめる
-
[CSSチュートリアル]テーブル table :nth-child()を使って行間の色変更と整列を実現する。
-
[css3]CSS3は本当にSCSSに取って代わるのだろうか?
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[css3]css3におけるtransformプロパティの4つの機能
-
[CSSチュートリアル】CSS擬似要素::マーカー解説
-
[CSSチュートリアル】CSSもこんな風に遊べる?気まぐれグラデーションの極意
-
[CSSチュートリアル】position:stickyでトップ吸い上げアプレット問題を完璧に解決
-
[css3]css3は、背景画像の色を変更するためのさまざまな方法を実現するために
-
[Div+CSSチュートリアル】divの背景を透明にする設定例
-
[CSSチュートリアル】CSSでマウスの位置をマッピングし、マウスの動きでページ要素を制御する効果を実現する(コード例)
-
[CSSチュートリアル】シンプルなナビゲーションバー機能を実現するhtml+css
-
[css3]CSS3遷移回転遠近法2D3Dアニメーションなどの効果を持つサンプルコード
-
[解決済み] オフラインでマテリアルアイコンをホストする方法は?