导入html字体及其样式变体？ [英] Import html fonts and their style variations?

问题描述

我在我的网站中实施了名为 Roboto 的google字体。

我需要2种类型： bold 和正式。

所以我检查了这两种类型，并按下载按钮： / p>

>

但是在下载的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兼容模式* / 
 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> 
  

问题：

假设我要对 div 应用 Roboto粗体样式。

我应该这样做：

  div {
 font-family： Roboto'，无衬线
 font-weight：bold 
} 
  

  @ font-face {
 font-family：'Roboto-bold'; 
 src：url（'/ font-face / Regular / Roboto-bold.eot'）; / * IE9兼容模式* / 
 ... 
} 
  

  div {font-family：'Roboto-bold'，sans-serif; } 
  

解决方案

p>

  @ font-face {
 font-family：'Roboto'; 
 font-style：normal; 
 font-weight：400; 
 src：/ *链接到Regular文件* /; 
} 
 @ font-face {
 font-family：'Roboto'; 
 font-style：normal; 
 font-weight：700; 
 src：/ *链接到粗体文件* /; 
} 
  

注意如何在 @ font-face 规则。现在浏览器知道字体Roboto存在两种变体。浏览器将根据您的CSS自动选择最佳的变体。因此，例如：

  div {
 font-family：Roboto，sans-serif; 
 font-weight：bold; 
} 
  

这里浏览器选择粗体字体文件。这是所有自动。您只需要确保正确设置 @ font-face 规则。

I'm implementing google's font named Roboto in my site.

I need 2 types : bold and regular.

So I checked both types and pressed the download button :

But in the downloaded rar file I got ALL the font styles ( also ones which I didn't choose) :

Anyway I wanted to test the regular font : (the fonts are now in my site and not being loaded from google).

(I got those other extensions types (eot,woff,svg) using a font converter (http://www.font2web.com/))

So I did :

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

Question :

Let's say I want to apply a Roboto bold style to a div.

Should I do it like this :

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

or should I do this ( start all over...)

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

and then

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

解决方案

This is what you have to do:

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

Notice how the same font name is used in both @font-face rules. Now the browser knows that the font "Roboto" exists in two variants. The browser will automatically choose the best variant based on your CSS. So, for example:

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

Here the browser chooses the Bold font file. It's all automatic. You just have to make sure that you set up the @font-face rules correctly.

这篇关于导入html字体及其样式变体？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！