Content

前端开发如何使用其他字体(图文)

2 min read

文章摘要

这篇文章介绍了如何使用自己下载的字体美化网站，重点讲述了三个关键步骤：字体选择、字体转换以及字体引用。在字体选择时，需要注意字体文件的体积不宜过大，同时要确保字体拥有合法的版权。推荐使用体积小巧且商用的字体，并可以通过@font-face语法在CSS中引用下载好的字体文件。文章还提供了具体的代码示例，帮助读者快速上手。通过这些方法，用户可以轻松地将自己下载的字体应用于网站设计中，提升网站的整体视觉效果。

我们经常看到别人的网站字体非常漂亮，那是因为他们使用了其他的美化字体，合理的使用字体可以让网站看上去，高端优雅。那么如何使用自己下载的字体，执刀人今天分享给大家整套方法。

1、字体选择

选择字体要注意两点，如果这两点不注意，会适得其反的。

一、大家都知道，字体文件都是几M甚至几十M，对于网站来说，属于非常大的了，用户在打开页面时，加载会非常慢，所以切记体积不能过大。

二、注意字体版权，不要什么字体都拿来用，现在国内的字体商都不讲武德的，随意使用分分钟律师函赔钱。

前端开发如何使用其他字体(图文)

字体是否可以商用可以使用360的字体查询网站：

2、字体转换

推荐使用可以商用且体积小巧的字体，可以去我推荐的这个字体网站找找。

3、字体引用

用CSS3的@font-face语法，加载引用下载好的字体文件。

1
2
3
4
5
6
@font-face {
  font-family: "11px"; 
  src: url('https://www.wdzzz.com/fonts.woff2') format('woff2'),
       url('https://www.wdzzz.com/fonts.woff') format('woff'),
       url('https://www.wdzzz.com/fonts.ttf') format('truetype');
}

最后使用字体方法

1
2
3
body{
        font-family: "11px";
}