📜  如何使用 CSS 包含字体 .ttf ?

📅  最后修改于: 2021-10-29 03:56:16             🧑  作者: Mango

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


HTML



    
    
    


     
 
 

The font on this paragraph looks 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浏览器
  • 火狐
  • 歌剧
  • 苹果浏览器