如何使用 CSS 包含字体 .ttf ？

使用 CSS 添加 .ttf 字体：在 80 年代后期，在被 adobe 的 type 1 字体击败后，Apple 提出了一种新的字体格式类型，即 .ttf（True Type Font）。这些字体非常棒，它们在很短的时间内成为世界上最常见的字体格式。事实上，windows 本身就开始在那里的操作系统中使用它们。

然后，如果您希望在您的网页中使用这些字体格式，这里有一个详细的分步说明，如何使用 CSS 在 Html 中导入和使用 .ttf（真字体）。

1.下载.ttf格式文件： .ttf 格式现在非常有名，这些字体文件可以在谷歌上免费获得。您可以访问字体空间、字体松鼠等免费提供这些字体的网站。将所有文件保存在同一个文件夹中。

2. 创建一个 HTML 文件：创建一个 HTML 文件并添加一个 h2 标签来展示我们的字体样式。

HTML

    
    
    


    
This font is awesome

3.创建一个CSS文件：为了通过CSS添加外部字体，我们使用@Font-face属性来手动定义字体名称并给出源文件。之后，我们可以在 Font-family 属性所需的任何元素中访问我们定义的字体。

@font-face {
    font-family: myFirstFont;
    src: url(ArianaVioleta-dz2K.ttf);
}
  
h2 {
    font-family: myFirstFont;
    color: darkgreen;
}

最终结果：这就是我们的字体在浏览器上的外观

浏览器中的字体

如果你在上面的例子中没有理解这个想法，让我们尝试另一种字体样式。

HTML文件：

HTML

    
    
    


     
 
 
The font on this paragraph looks awesome
 
 
 

CSS文件：

@font-face {
   font-family: myFirstFont;
   src: url(ChrustyRock-ORLA.ttf);
}
 
h2 {
   font-family: myFirstFont;
   color: darkgreen;
}

输出：

使用新字体的第二个示例

支持的浏览器：

• 谷歌浏览器
• IE浏览器
• 火狐
• 歌剧
• 苹果浏览器