css3里面怎么引用外部字体包，不再是单调的微软雅黑和宋体

‌　　在网站页面中有时我们需要有一个好看的字体，毕竟好看的字体会让整个页面看起来更加美观也更吸引用户，下面给大家来介绍一下css外部字体引入的方法。

一、需求分析

　　之前在写网页的过程中，遇到很多字的问题。比如ui设计师给了很好看的设计稿，但是因为担心浏览网页的人本地没有这些字体，于是每次都使用单调的微软雅黑或者宋体来代替。因为字体不一样，结果出来的效果和设计稿差很多。

 　　但是现在这个问题已经解决，css3出了一个外部字体库的功能，之前为了写这个功能，绕了很多弯路，直至心灰意冷。后来终于找到了一个解决问题的方法。

二、解决方法

第一步：保证自己本地有需要的字体。

　　1、确保自己的本地有你需要的字体，推荐下载地址：https://zfont.cn 。在自己的项目目录下面建立一个fonts文件夹，把自己需要用到的字体放在这个目录下面。ps：获取字体的方式有很多种，可以自己到网上去下载自己喜欢的字体，但是很多字体下载的时候都是需要付费的，知识付费的时代，也很正常。

　　2、字体文件也要很多格式，比如 '.ttf'  、'.woff'  、'.eot'  、'.svg'等等各种格式，并且大家很清楚的是，各大浏览器厂商很难做到都兼容各种字体，所以要准备各种格式的字体和代码，以适应各种各样的浏览器。所以得把你本地的一种字体格式转换成多种字体格式。推荐转换网站：https://www.fontconverter.org 。

第二步、在css里引用字体文件

@font-face {
	font-family: 'YourWebFontName';     /* 这个名字可以自己定义 */
	src: url('../fonts/delicious-webfont.eot'); /* IE9 Compat Modes */      /*这里以及下面的src后面的地址填的都是自己本地的相对地址*/
	src: url('../fonts/delicious-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('../fonts/delicious-webfont.woff') format('woff'), /* Modern Browsers */
        url('../fonts/delicious-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
        url('../fonts/delicious-webfont.svg') format('svg'); /* Legacy iOS */
        font-weight: normal; /*normal为默认值，bold为粗体，bolder为更粗字符，lighter定义更细的字符，100-900定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。*/
        font-style: normal;
}

　　‌然后，在需要使用该字体的地方，通过font-family属性指定字体名称：

body {
        font-family: 'YourWebFontName', sans-serif;
 }

　　‌在上述示例中，通过@font-face规则引入了Web字体文件，并为其指定了一个自定义的字体名称。然后，在需要使用该字体的地方，通过font-family属性指定字体名称。

　　‌PS：引用字体文件可能会导致网站访问变慢，因为中文字体文件体积大。英文字体文字部分由26个字母组成；而中文汉字数量总共约有九万左右， 国标(GB)字库 有6763字, 而根据《现代汉语常用字表》统计数据，常用汉字也要有3500个左右。 中文字体文件通常都会几M甚至几十M的大小，引用前还需权衡利弊。