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

Posted 2023-03-06

【中文标题】导入 html 字体及其样式变化？

【英文标题】：Import html fonts and their style variations?

【发布时间】：2013-06-14 12:01:54

【问题描述】：

我正在我的网站中实现名为 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; 

【参考方案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 权重，这不是您想要的效果。

【参考方案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 规则。

【讨论】：

为什么不直接加粗常规字体，而不是下载和使用 Roboto-bold 字体？他们看起来不会一样吗？在浏览器中进行测试时，它们看起来与我的眼睛非常相似。

nm，我发现了这个，提醒了一点：alistapart.com/article/say-no-to-faux-bold

【参考方案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');

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

【讨论】：

是的，有。谷歌在显示警告的 mime 类型兼容性方面存在问题。我必须下载字体并注册当前的 mime 类型。

和顺便说一句-您的回答与我的问题无关，而是与我下载字体的方式有关。

似乎应该不再有关于 chrome 上谷歌字体的 MIME 类型的问题：请参阅***.com/questions/3594823/mime-type-for-woff-fonts

嗯，这是因为在更改我的 iis mime 类型设置后 - 在收到此错误/警告 Resource interpreted as Font but transferred with MIME type application/octet-stream 后 - 它已经解决了。

此外，控制台中有关字体 MIME 类型的警告通常可以安全忽略

【参考方案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 */
    /*....*/
    

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

【讨论】：

如果我使用你的第一个代码，我还必须下载 Roboto-bold 字体吗？我的意思是-如果浏览器没有加粗字体，他怎么知道如何渲染它...？

您使用来自网站的 src（源代码），如果您已经获得源代码，则不必下载字体，因为您的网站中已经有他。您可以下载字体并将其用作本地并节省加载时间

Yotam 这不是我的问题。我会改写。如果我只使用Roboto-Regular，然后使用font-weight:bold，即使我没有这样做，浏览器是否会知道如何呈现粗体字体：url('/font-face/Regular/Roboto-bold(!!!!).ttf')？

Yotam 是什么让你认为我没有下载字体？我明确说（_downloaded rar file _）。字体在我的解决方案中。我的问题仍然是我是否应该将 SRC 用于粗体版本。

同样，如果你使用 src 或本地主机。但是由于您在本地主机中拥有字体，因此您应该使用它们，这样可以节省您在网站之间加载的时间。如果字体相同，则优质 bettwen SRC 和 LocalHost 将相同。