font-face如何使用外部字体 CSS引用字体方法

本文介绍了font-face如何使用外部字体，也就是通用CSS引用字体的方法，一般来说HTML开发的网页使用的字体都是固定的，比如说宋体，黑体，微软雅黑等，假如想使用特殊的字体怎么办呢，比如在做古韵味网站时，就要引用古体字，又不想使用大量的图片，就可以通过引用字体来实现了。

下面来说说CSS引用字体的方法，其实方法很简单，就是使用font-face这个标签。

大家在使用fontawesome字体图标时，有没有留意到fontawesome.CSS最前面的几行，写法如下：

@font-face{font-family:'FontAwesome';src:url('../fonts/fontawesome-webfont.eot?v=4.7.0');src:url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');font-weight:normal;font-style:normal}

其实这个就是引用的字体，我们就可以通过同样的方法引用想要的字体了

步骤详情：

第一步、先将想用的字体放到某文件里，比如fonts，这个fonts最好和CSS文件并列，这样引用时比较方便些

第二步、在CSS文件里，复制下面的代码：

 @font-face {
    font-family: 'xinziti';
    src: url('../fonts/Jomolhari.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

其中， font-family后面单括号里的就是字体名称，可以随便写，但要记住了，CSS使用时就引用这个名字；src是字体路径，不要写错了；其他两项默认normal就可以了

第三步、如何使用呢，比如说有个H1，想要使用上面新增加的字体，就可以在H1的CSS上这样写：

font-family: 'xinziti';

就可以了~

假如使用多个字体，那复制多份就可以了，也就是：

 @font-face {
    font-family: 'xinziti1';
    src: url('../fonts/Jomolhari1.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

 @font-face {
    font-family: 'xinziti2';
    src: url('../fonts/Jomolhari2.ttf') format('truetype');
    font-weight: normal;
    font-style: normal
}

如果没有生效，先看字体路径对不对，再看服务器开启支持了么

WIN服务器字体支持看这儿：https://www.qilucms.com/xueyuan/jiaocheng/293.html