☰

Google Webフォントの使用

tag-icon • tag-icon websites license ubuntu-font-family
Google Webフォントの使用

次のようなライセンスを検討します:

ユーザーにインストールさせずに、どのウェブサイトでも Ubuntu フォント ファミリを使用するにはどうすればよいですか?
次のようなツールで使用できる可能性はありますか?http://code.google.com/intl/en-US/apis/webfonts/

答え1

@font-faceUbuntu フォントを Web サイトに埋め込むには、Google フォント ディレクトリを使用する方法 (推奨) と、CSS 宣言を使用してフォントを手動で変換する方法の 2 つの方法があります。

Google Webフォントの使用

UbuntuフォントをGoogleウェブフォントとして利用できるようになりました。これにより、プロセスがはるかに簡単になります。回答のこの部分の内容のほとんどは、スレイデンの答え。

Google Font API の使用が推奨されるのはなぜですか?

Google Font APIの使用は、細かい点を気にすることなく、すべての最新ブラウザでウェブフォントを自動的に動作させることができるため、優れた提案です。フォントAPIを使用すると、訪問者は常に最新書体のバージョンを自動的に変更します。

Google Font API を使用するにはどうすればよいですか?

2010 年 12 月 21 日より、Ubuntu フォント ファミリーが Google フォント API に含まれ、デプロイできるようになりました。次のサイトをご覧ください。

あなたは読むことができますGoogle Web Fontの投稿ニュースについて、そして次に:

  1. Googleフォントディレクトリを開きます: "Ubuntu - このフォントを使用する「ページ」

  2. 組み合わせをチェックしてください重みとスタイルWeb ページに必要な標準、斜体、太字、太字斜体の中から選択します。

    代替テキスト

  3. デフォルトが正しくない場合は、言語/文字の組み合わせ必要なもの: 英語の例を含むロシア語の Web サイトでは、「キリル文字、ラテン文字」が使用される可能性があります。

    代替テキスト

  4. HTML ページまたはテンプレートのの間に指定された<link>タグを追加し、内の タグの間に適切な CSS コードを追加します。<head> ... </head><style> ... </style><head>

    たとえば、ロシア語と英語のハイブリッド Web サイトを作成し、すべてのテキストのデフォルトとしてフォントを使用したい場合は、<head>タグの間に次のコードを追加できます。

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>

ノート:

「ラテン語」は脚本英語やその他多くのヨーロッパ言語、アフリカ言語が書かれている言語です。

「サブセット化」は、特定の言語の文字のみを送信することでフォント ファイルを最適化します。フォントはそれぞれ約 44 KB です。現在表示されている 168 KB という数字は、1,200 を超えるグリフすべてを 1 回の Web フォント ダウンロードとして計算したもので、そのほとんどは 1 つの Web サイトでは必要ありません。

Ubuntu フォント ファイルは、さまざまなブラウザーに適した形式に自動的に変換されます。メーカーとバージョンに応じて、必要な形式は、、、WOFFまたはです。適切な CSS の組み合わせは各ページ リクエストに固有であり、この難しい問題を魔法のように解決します。EOTSVGTTF

@font-face の使用

Ubuntuフォントを埋め込むにはそれらを変換するにWOFFフォント. その後、CSS @font-face 宣言を使用して埋め込むことができます。フォント (.ttf ファイル) は にあります/usr/share/fonts/truetype/ubuntu-font-family。

たとえば、Ubuntu Regular フォントを WOFF ファイル Ubuntu-R.woff に変換するには、次の CSS コードを使用します。

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

Ubuntu Boldの場合も同様です:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu イタリック:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu 太字斜体:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

これは全員に支持されている最近のブラウザ。

考慮事項

一部のユーザーはブラウザで特定のフォントセットを使用するように設定しているため、カスタムフォントが使用されると不快に感じる場合があることに注意してください。また、Ubuntu フォントライセンスフォントの配布方法に関する正確な条件については、こちらをご覧ください。

答え2

Google Font APIの使用は、細かい点を気にすることなく、すべての最新ブラウザでウェブフォントを自動的に動作させることができるため、優れた提案です。フォントAPIを使用すると、訪問者は常に最新書体のバージョンを自動的に変更します。

2010 年 12 月 21 日より、Ubuntu フォント ファミリーが Google フォント API に含まれ、デプロイできるようになりました。次のサイトをご覧ください。

あなたは読むことができますGoogle Web Fontの投稿ニュースについて、そして次に:

  1. Googleフォントディレクトリを開きます: "Ubuntu - このフォントを使用する「ページ」
  2. 組み合わせをチェックしてください重みとスタイルWeb ページに必要な標準、斜体、太字、太字斜体の中から選択します。
  3. デフォルトが正しくない場合は、言語/文字の組み合わせ必要なもの: 英語の例を含むロシア語の Web サイトでは、「キリル文字、ラテン文字」が使用される可能性があります。
  4. コピーして貼り付ける2行のCSSHTML ページまたはテンプレートの<head> ... </head>およびセクションに追加します。<style>...</style>

ノート：

「ラテン語」は脚本英語やその他多くのヨーロッパ言語、アフリカ言語が書かれている言語です。

「サブセット化」は、特定の言語の文字のみを送信することでフォント ファイルを最適化します。フォントはそれぞれ約 44 KB です。現在表示されている 168 KB という数字は、1,200 を超えるグリフすべてを 1 回の Web フォント ダウンロードとして計算したもので、そのほとんどは 1 つの Web サイトでは必要ありません。

Ubuntu フォント ファイルは、さまざまなブラウザーに適した形式に自動的に変換されます。メーカーとバージョンに応じて、必要な形式は、、、WOFFまたはです。適切な CSS の組み合わせは各ページ リクエストに固有であり、この難しい問題を魔法のように解決します。EOTSVGTTF

答え3

サーバー側でのフォント レンダリング (おそらく「動的フォント レンダリング」の方が適切) は、かなり長い間、興味深い問題でした。

技術的には、マシンが特定のフォントを表示するには、そのフォントがすでにローカルにインストールされている必要があると考えられます。

一方、Web デザインでは、基本的な/よく知られている「Web フォント」に固執する必要があるため、多くのことが失われます。

CSS2.1では、@フォントフェイスルール宣言。
まだ標準にはなっていませんが、CSS3 では最終的に標準になります。

それ以外にも、次のような代替方法がいくつかあります。

提供されたリンクによって、何ができるかについてよりよく理解していただければ幸いです ;-)

関連情報