任意のWebページにUbuntuフォントを埋め込みます


回答:


25

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

Google Webfontsを使用する

UbuntuフォントをGoogle Webフォントとして使用できるようになりました。これにより、プロセスが非常に簡単になります。回答のこの部分の内容のほとんどは、sladenの回答から来ています

Google Font APIを使用するのが望ましい方法なのはなぜですか?

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

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

2010年12月21日以降、Ubuntu Font FamilyがGoogle Font APIに含まれ、デプロイできるようになりました:

ニュースに関するGoogle Web Fontの投稿を読むと、次のことができます。

  1. Googleフォントディレクトリを開きます:「Ubuntu-Use this font」ページ
  2. Webページに必要なレギュラー、イタリック、ボールド、ボールドイタリックのうち、重みとスタイルの組み合わせにチェックマークを付けます。

    代替テキスト

  3. デフォルトが正しくない場合は、必要な言語/スクリプトの組み合わせを選択します。ロシア語のウェブサイトで英語の例を使用すると、「キリル文字、ラテン文字」を使用できます。

    代替テキスト

  4. HTMLページまたはテンプレートの<link><head> ... </head>に指定のタグを追加し、のタグの間に適切なCSSコードを追加<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フォントファイルは、さまざまなブラウザーに合わせて自動的に正しい形式に変換されます。メイクやバージョンによって必要な形式があるWOFFEOTSVGまたはTTF。CSSの適切な組み合わせは、各ページリクエストに固有であり、この難しい問題を魔法のように解決します。

@ font-faceを使用する

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

たとえば、WOFFファイルUbuntu-R.woffに変換されたUbuntu Regularフォントを使用するには、次の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 Font Licenseをお読みください。


@ DKuntz2-それは確かに優れています。答えを変えました。
dv3500ea

Sladenの回答をコピーする必要があることを理解していませんでした。なぜ編集しないのですか?
パプカイジャ

私は、@ font-faceメソッドの概要を説明する前に、この質問に長い間答えました。これは、フォントがGoogle Font APIに追加される前の方法です(より良い方法です)。回答の冒頭に短いメモを追加しただけで、sladenはより包括的に回答し、googleメソッドを使用することでより良い回答を得ました。
dv3500ea

1
しかし、この時点で私の答えは受け入れられ、大いに支持され、その結果、人々はあまり好ましくない@ font-faceメソッドを使用すべきだと考えるかもしれません。sladenからこの件についてメールで連絡があり、このサイトのクリエイティブコモンズライセンスで必要とされる属​​性を指定して、回答を変更することに同意しました。
dv3500ea

10

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

2010年12月21日以降、Ubuntu Font FamilyがGoogle Font APIに含まれ、デプロイできるようになりました:

ニュースに関するGoogle Web Fontの投稿を読むと、次のことができます。

  1. Googleフォントディレクトリを開きます:「Ubuntu-Use this font」ページ
  2. Webページに必要なレギュラー、イタリック、ボールド、ボールドイタリックのうち、重みとスタイルの組み合わせにチェックマークを付けます。
  3. デフォルトが正しくない場合は、必要な言語/スクリプトの組み合わせを選択します。ロシア語のウェブサイトで英語の例を使用すると、「キリル文字、ラテン文字」を使用できます。
  4. コピー&ペーストCSSの2行<head> ... </head>し、<style>...</style>あなたのHTMLページやテンプレートのセクション。

ノート:

「ラテン語」は、英語および他の多くのヨーロッパおよびアフリカ言語が記述されているスクリプトです。

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

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


8

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

技術的には、マシンが特定のフォントを表示するためには、すでにローカルにインストールされている必要があるのは論理的なようです。

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

CSS2.1は、@ font-faceルール宣言を使用することにより、いくつかの改善を行いました。
それはまだ標準になりませんでしたが、最終的にはCSS3になります。

それに加えて、次のようないくつかの代替方法があります。

提供されたリンクがあなたに何ができるかについてのより良いアイデアを提供することを望みます;-)

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.