テンプレートがあるのですが、このようにGoogleフォントを参照するようになっています。
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,600italic,400,600,300' rel='stylesheet' type='text/css'>
オフラインでずっと動いている私のページで使うには、どのようにダウンロードして設定すればいいのでしょうか?
GoogleのすべてのWebフォントをダウンロードでき、実装にcssコードを提案します。 このツールを使用すると、面倒なくすべての形式を一度にダウンロードすることもできます。
GoogleがWebフォントをホストしている場所を知りたいと思ったことはありません? このサービスは、googleから直接フォントバリアントのすべての.eot、.woff、.woff2、.svg、.ttfファイルをダウンロードする場合に便利です(通常、User-Agentが最適な形式を決定します)。
また、Githubページもご覧ください。
Googleフォント-http://www.google.com/fonts/に移動し、コレクションに好きなフォントを追加して、ダウンロードボタンを押してください。 次に、@ fontfaceを使用して、このフォントをWebページに接続します。 ところで、使用しているリンクを開くと、@ fontfaceの使用例が表示されます。
<。!-言語:lang-none -->。
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アドレスを変更するだけです。
さらに簡単にできます。
ファイルをダウンロードするだけで、リンクができました。
<。!-言語:lang-none -->。
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'>
これを達成するための段階的な方法を見つけました(1フォントの場合):< br />。 ( 2013年9月9日現在)。
1。 http://www.google.com/fontsでフォントを選択してください。 2。 「コレクションに追加」の青いボタンを使用して、目的のものをコレクションに追加します。 3。 [コレクションから削除]ボタンの近くにある[すべてのスタイルを表示]ボタンをクリックして、[太字]など、必要な他のスタイルを選択していることを確認します。.. 4。 ページの右下にある[使用]タブボタンをクリックします。 5。 上のダウンロードボタンを下矢印画像でクリックします。 6。 表示されるポップアップメッセージの[zipファイル]をクリックします。 7。 ポップアップの[閉じる]ボタンをクリックします。 6。 3つのタブ「Standrd |@ import | Javascript」が表示されるまで、ゆっくりとページをスクロールします。 7。 [@import]タブをクリックします。 8。
'url( '
と')'
の間のURLを選択してコピーします。 9。 新しいタブのアドレスバーにコピーして、そこに行きます。 10。 「ファイル>名前を付けてページを保存」を実行します。.."そして、それを" desiredfontname.css "と名付けます(それに応じて置き換えます)。 11。 ダウンロードしたフォント.zipファイルを解凍します(.ttfを抽出する必要があります)。 12。 "http://ttf2woff.com/"に移動し、zipから抽出された.ttfを.woffに変換します。 13。desiredfontname.css
を編集し、その中のすべてのURL ['url('
と') ''の間]を、ttf2woff.comで取得した対応する変換された.woffファイルに置き換えます。記述するパスは、サーバーdoc_rootに従う必要があります。 14。 ファイルを保存し、最終的な場所に移動して、対応する
< link />` CSSタグを書き込んで、HTMLページにインポートします。 15。 これからは、このフォントをスタイルの「フォントファミリ」名で参照してください。
それでおしまい。 同じ問題があり、その上の解決策がうまくいかなかったからです。< br />。
他の答えは間違っていませんが、これが最速の方法であることがわかりました。
1。 Googleフォントからzipファイルをダウンロードして解凍します。 2。 フォントファイル3を一度にhttp://www.fontsquirrel.com/tools/webfont-generatorにアップロードします。 3。 結果をダウンロードしてください。
結果には、woff、svg、ttf、eot のすべてのフォント形式が含まれています。
さらに、追加のボーナスとして、cssファイルも生成されます。!
Googleフォントをオフラインで使用する方法については、この便利な記事を参照してください。
基本的には、フォントをプロジェクトに含めることになります。
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: normal;
src: url('path/to/OpenSans.eot');
src: local('Open Sans'), local('OpenSans'), url('path/to/OpenSans.ttf') format('truetype');
3つのステップ:
1。 Gooleフォントでカスタムフォントをダウンロードし、.cssファイルをダウンロードします。 ex:http://fonts.googleapis.com/cssをダウンロードします?family = Open + Sans:400italic、600italic、400,600,300。 example.css として保存します。 2。 ダウンロードしたファイルを開きます( example.css )。 次に、すべてのfont-faceファイルをダウンロードして、 fonts ディレクトリに保存する必要があります。 3。 example.css を編集:すべてのfont-faceファイルを.cssダウンロードに置き換えます。
例:
<。!-スニペットを開始:js hide:false console:false babel:false -->。
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
<。!-終了スニペット-->。
srcを見てください:-> url。 http://fonts.gstatic.com/s/opensans/v14/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2をダウンロードして、 fonts ディレクトリに保存します。 その後、URLをダウンロードしたすべてのファイルに変更します。 今それは次のようになります。
<。!-スニペットを開始:js hide:false console:false babel:false -->。
@font-face {
font-family: 'Open Sans';
font-style: italic;
font-weight: 400;
src: local('Open Sans Italic'), local('OpenSans-Italic'), url(fonts/xjAJXh38I15wypJXxuGMBvZraR2Tg8w2lzm7kLNL0-w.woff2) format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
<。!-終了スニペット-->。
**すべてのフォントに.cssファイルが含まれていることをダウンロードします。 それがあなたを助けることを願っています。
Google Fontsを使用する場合、ワークフローは3つのステップに分けられます: "選択"、 "カスタマイズ"、 "埋め込む"。よく見ると、"Use"ページの右端に、現在コレクションしているフォントをダウンロードするための小さな矢印があります。
その後、一度フォントをシステムにインストールしたら、他の普通のフォントと同じように font-family
CSSディレクティブを使用して使用する必要があります。
パッケージの依存関係を明示的に宣言するか、ダウンロードを自動化する場合は、ノードパッケージを追加して、Googleフォントを引き込み、ローカルでサービスを提供できます。
typefacesプロジェクトは、オープンソースタイプフェースのNPMパッケージを作成します。
各パッケージには、オープンソースタイプフェイスをセルフホストするために必要なすべてのフォンとcssが付属しています。 すべてのGoogleフォントが追加され、他のオープンソースフォントのリストも小さくなっています。
typeface-< typefacename >< / code>の[npmを検索][11]を検索] typeface-robotoやtypeface-open-sansなどの使用可能なフォントを参照し、次のようにインストールします。
$ npm install typeface-roboto --save
$ npm install typeface-open-sans --save
$ npm install material-icons --save
より一般的な使用の場合、最初にパッケージを取得し、次にそれを含めてほしいフォント名とオプションを指すことにより、2つのステップでフォントを配信するいくつかのnpmパッケージがあります。
ここにいくつかのオプションがあります:
さらに読む:
[11]:https://www.npmjs.com/search?q = author%3Akylemathews%20typeface-。
duydb'sの回答に従って、このプロセスを自動化する以下のpythonコードを作成しました。
import requests
with open("example.css", "r") as f:
text = f.read()
urls = re.findall(r'(https?://[^\)]+)', text)
for url in urls:
filename = url.split("/")[-1]
r = requests.get(url)
with open("./fonts/" + filename, "wb") as f:
f.write(r.content)
text = text.replace(url, "/fonts/" + filename)
with open("example.css", "w") as f:
f.write(text)
これがコピーペストの死の一部に役立つことを願っています。
フォントをダウンロードし、ローカルで参照する必要があります。
投稿したリンクからCSS
をダウンロードし、次にWOFF
ファイルをすべてダウンロードし、(必要であれば)TTF
に変換してください。
そして、あなたが投稿したリンクからCSS
を変更し、フォントをローカルに含めるようにします。
から
url(http://themes.googleusercontent.com/static/fonts/opensans/v6/
DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff)
への
url(/path/to/font/font.woff)
これで完了です。他にも必要なことがあるかもしれませんが、上記が基本です。この記事では、もう少し詳しく説明しています。