8

以下のように、Angular 4 プロジェクトの scss ファイルに Google フォントの URL をインポートしています。

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Oswald:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Heebo:400,500,700');

URLを直接インポートする代わりに、それらをダウンロード/インストールして、angular 4 scssファイルでローカルに使用するにはどうすればよいですか.

どんな解決策も役に立ちます。

4

2 に答える 2

0

googleapis.comドメインでホストされている Google のスタイル シートをダウンロードします。

https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap

ファイルをテーマディレクトリに保存して、次のようにします。

https://www.example.com/themes/fonts.css

このfonts.cssファイルを開くと、次のようなコンテンツがあります。

/* latin-ext */
 @font-face {
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: url(https://fonts.gstatic.com/s/montserrat/v15/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');
   unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
...

urlテーマで新しく作成されたフォルダーからフォントを保存し、パスを次のようにfonts置き換えます。fonts.css

src: url(https://www.example.com/themes/fonts/JTUSjIg1_i6t8kCHKm459Wdhyzbi.woff2) format('woff2');

注: 私の場合、ダウンロードするフォントが 60 以上ありました :-)

最後のステップはfonts.css、HTML に追加することです。

<link rel="stylesheet" id="local-fonts-css" href="https://www.example.com/themes/fonts.css?ver=1.0" type="text/css" media="all">

それが基本です。詳細については、このブログ投稿をご覧ください。

于 2021-11-22T09:46:18.280 に答える