web-dev-qa-db-ja.com

WebサイトでGoogleのRobotoフロントを使用する方法

私は自分のウェブサイトでGoogleのRobotoフォントを使いたいのですが、私はこのチュートリアルに従っています。

http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15

私はこのようなフォルダ構造を持つファイルをダウンロードしました：

enter image description here

今、私は3つの質問があります。

  1. media/css/main.cssのURLにcssがあります。それで、私はそのフォルダをどこに置く必要がありますか？
  2. すべてのサブフォルダからすべてのeot、svgなどを抽出してfontsフォルダに入れる必要がありますか？
  3. CSSファイルfonts.cssを作成し、ベーステンプレートファイルに含める必要がありますか？

彼がこれを使った例

@font-face {
    font-family: 'Roboto';
    src: url('Roboto-ThinItalic-webfont.eot');
    src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('Roboto-ThinItalic-webfont.woff') format('woff'),
         url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
         url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License). 
    font-weight: 200;
    font-style: italic;
}

Dir構造を次のようにしたい場合、URLはどのようになりますか。

/media/fonts/roboto

htmlcssfonts
123
user26

あなたは本当にこれをする必要はありません。

  • Googleの Webフォントページ にアクセスします。
  • 右上の検索ボックスでRobotoを検索してください。
  • 使用するフォントの種類を選択してください
  • 上部にある[このフォントを選択]をクリックして、必要な太さと文字セットを選択します。

ページには、ページに含める<link>要素と、CSSで使用するサンプルのfont-family規則のリストが表示されます。

このようにGoogleのフォントを使用すると、可用性が保証され、自分のサーバーへの帯域幅が減少します。

208
user1864610

あなたのページにライセンスされたWebフォントを使用するためにあなたが取ることができる2つのアプローチがあります 。

  1. Typekit、Fonts.com、Fontdeckなどのフォントホスティングサービスは、購入したフォントを管理し、フォントを提供する動的CSSまたはJavaScriptファイルへのリンクを生成するための簡単なインタフェースを設計者に提供します。 Googleは無料でこのサービスを提供しています（ ここ はあなたが要求したRobotoフォントの例です）。 Typekitは、フォントがブラウザ間で同じピクセルを占めるように追加のフォントヒントを提供する唯一のサービスです。

    GoogleやTypekitで使われているようなJSフォントローダー（すなわちWebFontローダー）はCSSクラスとコールバックを提供してFOUTが発生したり、フォントのダウンロード時に応答がタイムアウトしたりします。

    <head>
  <!-- get the required files from 3rd party sources -->
  <link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

  <!-- use the font -->
  <style>
    body {
      font-family: 'Roboto', sans-serif;
      font-size: 48px;
    }
  </style>
</head>

  2. DIYのアプローチでは、フォントをWebで使用するためのライセンスを取得し、（オプションで）FontSquirrelのジェネレータ（またはいくつかのソフトウェア）のようなツールを使用してファイルサイズを最適化します。 それから、標準の@font-face CSSプロパティのクロスブラウザ実装を使ってフォントを有効にします。

    この方法では、含める文字、したがってファイルサイズを細かく制御できるため、ロードパフォーマンスが向上します。

    /* get the required local files */
@font-face {
  font-family: 'Roboto';
  src: url('roboto.eot'); /* IE9 Compat Modes */
  src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('roboto.woff') format('woff'), /* Modern Browsers */
  url('roboto.ttf')  format('truetype'), /* Safari, Android, iOS */
  url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}

/* use the font */
body {
  font-family: 'Roboto', sans-serif;
  font-size: 48px;
}

短い話：

フォントホスティングサービスを@ font-face宣言とともに使用すると、全体的なパフォーマンス、互換性、および可用性に関して最高の出力が得られます。

出典： https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/

_アップデート_

Roboto：Googleの署名フォントは現在オープンソースです

ここで見つけることができる 指示を使って手動でRobotoフォントを生成することができます 。

52
Ashesh Kumar Singh

古い記事、私は知っています。

これはCSS@import urlを使っても可能です。

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
  font-family: 'Roboto', sans-serif;
}
14
rocksteady

srcはフォントファイルを直接参照するため、それらすべてを/media/fonts/robotoに配置する場合は、main.cssでそれらを参照する必要があります。src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');

..は1つ上のフォルダに移動します。これは、main.cssが/media/cssフォルダにある場合はmediaフォルダを参照していることを意味します。

CSSのすべてのURL参照で../fonts/roboto/を使用する必要があります（ファイルがこのフォルダにあり、roboto_black_macromanなどのサブディレクトリにはないことを確認してください）。

基本的に（あなたの質問に答える）：

Media/css/main.cssのURLにcssがあります。だから私はどこにそのフォルダを置く必要がありますか

そのままにしておくこともできますが、必ずsrc: url('../fonts/roboto/を使用してください。

私はすべてのサブフォルダからすべてのEOT、SVGなどを抽出し、フォントフォルダに置く必要がありますか

（CSSコードにサブディレクトリを配置せずに）これらのファイルを直接参照したい場合は、はい。

私はCSSファイルfonts.cssを作成し、私の基本テンプレートファイルに含める必要がありますか

必ずしもそうとは限りませんが、そのコードをmain.cssに含めることができます。ただし、カスタマイズしたCSSからフォントを分離することはお勧めです。

これが私が使用するフォントLESS/CSSファイルの例です：

@ttf: format('truetype');

@font-face {
  font-family: 'msb';
  src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}

@font-face {
  font-family: 'Roboto';
  src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
  font-family: 'Roboto Black';
  src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
  font-family: 'Roboto Light';
  src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}

（この例では、私はttfのみを使用しています）それから私のmain.lessファイルで@import "fonts";を使用します（ lessはCSSプリプロセッサです、これは少し簡単になります ）

4
Armfoot

フォントタイプ名の前に/ fonts /または/ font /を使用してください。 CSSスタイルシート私はこのエラーに直面していますが、その後はうまくいっています。

@font-face {
    font-family: 'robotoregular';
    src: url('../fonts/Roboto-Regular-webfont.eot');
    src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
1
Mohammed Javed
For Website you can use 'Roboto' font as below:

**If you have created separate css file then put below line at the top of css file as:**
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');

**Or if you don't want to create separate file then add above line in between <style>...</style>:**
<style>
  @import url('https://fonts.googleapis.com/css? 
  family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>

**then:**
html, body {
    font-family: 'Roboto', sans-serif;
}
1
Mr. Nobody

これを試して

<style>
@font-face {
        font-family: Roboto Bold Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
         font-family:Roboto Condensed;
        src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}

div1{
    font-family:Roboto Bold Condensed;
}
div2{
    font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
0
Lead Developer

そのZipファイルにあるHow_To_Use_Webfonts.htmlを読みましたか？

それを読んだ後、それはあなたがこれを含めることによって使用できるように各フォントサブフォルダがそこに既に作成された.cssを持っているようです：

<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
0
Barry Colebank Jr

それは簡単です

あなたがダウンロードしたもののすべてのフォルダは異なった種類のrobotoフォントを持っています、それらが異なったフォントであることを意味します

例： "roboto_regular_macroman"

それらのいずれかを使用します。

1 - 使用するフォントのフォルダを抽出します

2- CSSファイルの近くにそれをアップロードする

3-今すぐCSSファイルにそれを含める

"roboto_regular_macroman"というフォントを含める例

@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
     url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}

ファイルのパスを監視し、ここで私はCSSがあるのと同じフォルダーに "roboto_regular_macroman"というフォルダーをアップロードしました

それならfont-family: 'Roboto';とタイプすることで単純にフォントを使うことができます

0
Omar Moustafa