导入html字体及其样式变体？

Question

我正在实现Roboto在我的网站中命名的谷歌字体.

我需要2种类型:bold和regular.

所以我检查了两种类型并按了下载按钮:

但在下载的rar文件中,我得到了所有字体样式(也是我没有选择的字体样式):

无论如何,我想测试常规字体:( 字体现在在我的网站,而不是从谷歌加载).

(我使用字体转换器(http://www.font2web.com/)获得了其他扩展类型(eot,woff,svg ))

所以我做了 :

 <style type="text/css">

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


   body  { font-family: 'Roboto', sans-serif; }

    </style>

题 :

假设我想将一种Roboto bold风格应用于div.

我应该这样做:

 div  { 
       font-family: 'Roboto', sans-serif;
       font-weight:bold
      }

或者我应该这样做(从头开始...)

@font-face {
    font-family: 'Roboto-bold';
    src: url('/font-face/Regular/Roboto-bold.eot'); /* IE9 Compat Modes */
    ...
    }

然后

 div  { font-family: 'Roboto-bold', sans-serif; }

Answer 1

这是你要做的:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: /* links to the Regular files */;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: /* links to the Bold files */;
}

请注意两个@font-face规则中如何使用相同的字体名称.现在浏览器知道字体"Roboto"存在两种变体.浏览器将根据您的CSS自动选择最佳变体.所以,例如:

div {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}

这里浏览器选择Bold字体文件.这都是自动的.您只需确保@font-face正确设置规则.