web-dev-qa-db-ja.com

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

次のようなライセンスを検討する：

ユーザーにインストールせずに、どのWebサイトでUbuntuフォントファミリーを使用できますか？
次のようなツールで使用する可能性： http://code.google.com/intl/en-US/apis/webfonts/

websiteslicenseubuntu-font-family
16
takeshin

UbuntuフォントをWebサイトに埋め込むには、Google Font Directory（推奨）または@font-face CSS宣言を使用して手動でフォントを変換する2つの方法があります。

Google Webfontsを使用する

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

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

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

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

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

Google Web Fontの投稿 ニュースについて読むことができ、その後：

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

  2. Webページに必要なレギュラー、イタリック、ボールド、ボールドイタリックのうち、ウェイトとスタイルの組み合わせにチェックマークを付けます。

    alt text

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

    alt text

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

    たとえば、ロシア語/英語ハイブリッド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>

注：

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

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

Ubuntuフォントファイルは、さまざまなブラウザーに合わせて自動的に正しい形式に変換されます。製造元とバージョンに応じて、必要な形式はWOFF、EOT、SVG、または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;
}

これは、すべての 最近のブラウザー でサポートされています。

考慮事項

一部のユーザーは、特定のフォントセットを使用するようにブラウザを設定しているため、カスタムフォントを使用すると困る場合があることに注意してください。また、フォントの配布方法に関する正確な用語については、 buntu Font Licence をお読みください。

25
dv3500ea

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

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

Google Web Fontの投稿 ニュースについて読むことができ、その後：

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

ノート：

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

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

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

10
sladen

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

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

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

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

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

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

8
Pavlos G.