html - 导入 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;
}

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

Answer 2

为什么要下载字体？如果您在网站中使用它，您可以使用@importGoogle 提供的代码。

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

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

<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 3

从您的问题来看，您似乎只声明了一个font-face与常规版 Roboto 字体相关的规则。

使用您问题中的 CSS：

div {
    font-family: Roboto, sans-serif;
    font-weight: 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 4

你不必从头开始......如果你有@font-face自己的风格，那么你需要添加的只是你说的字体系列。

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 */
    /*....*/
    }

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