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

Question

我正在我的网站中实现名为 Roboto 的谷歌字体。

我需要两种类型：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 规则，与 Roboto 字体的常规版本有关。

使用您问题中的 CSS：

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

将导致浏览器 faux 加粗字体。原因是 bold 版本的字体没有包含 font-face 规则。参考这里：http://alistapart.com/article/say-no-to-faux-bold

正如其他人（@yotam 等）所提到的（无论字体是如何提供的），您需要为每个字体粗细声明一个字体规则。

@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 */;
}

然后您将按如下方式使用该字体粗细：

body {
    font-family: Roboto, sans-serif;
    font-weight: 400;
}
h1 {
    font-family: Roboto, sans-serif;
    font-weight: 700;
}

我会强调使用实际的字体粗细值而不是font-weight: bold。如前所述，使用font-weight: bold 将决定权交给浏览器。

在某些时候，您可能会使用粗细为700, 900 的字体。说700 加粗，900 加粗。如果您声明 font-weight: bold 将使用 900 权重，这不是您想要的效果。

Answer 2

这是你必须做的：

@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;
}

浏览器在这里选择粗体字体文件。这一切都是自动的。您只需确保正确设置了@font-face 规则。

Answer 3

您下载字体的任何原因？如果您在网站中使用它，您可以使用 Google 提供的 @import 代码。

在开头选择变体的复选框仅定义导入代码。如果您选择将字体下载到您的计算机上，无论您做出何种选择，它都会为您提供所有变体。

要使用该字体，只需包含指向包含@font-face 的样式表的链接，这是 google 为您提供的。例如

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>

或

@import url(http://fonts.googleapis.com/css?family=Roboto);

在您现有的样式表中。

然后这只是为您选择的元素设置字体系列的一个例子。例如

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

关于您的问题：

是的，每个变体都需要一个单独的@font-face。查看来自谷歌的示例

谷歌示例：

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Regular'), local('Roboto-Regular'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: local('Roboto Bold'), local('Roboto-Bold'), url(http://themes.googleusercontent.com/static/fonts/roboto/v8/d-6IYplOFocCacKzxwXSOD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

如果您的字体不包含粗体变体，浏览器会将粗体文本呈现为仿粗体。这可能具有不同的外观，具体取决于浏览器和操作系统。斜体和粗斜体也是如此。

Answer 4

您不必从头开始.. 如果您的风格中有 @font-face，那么您只需要添加您所说的 font-family。

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

为了清楚起见，您可以通过在 body 元素中使用他来将字体设为默认

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

编辑：

您可能会考虑将字体下载到您的网站文件夹中，然后花费网站加载时间，您只需将下一个代码添加到您的@font-face：

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

字体应该在字体文件夹中，他命名为字体。