css3⾥⾯怎么引⽤外部字体包，不再是单调的微软雅⿊和宋体⼀、需求分析
之前在写⽹页的过程中，遇到很多字的问题。⽐如ui设计师给了很好看的设计稿，但是因为担⼼浏览⽹页的⼈本地没有这些字体，于是每次都使⽤单调的微软雅⿊或者宋体来代替。因为字体不⼀样，结果出来的效果和设计稿差很多。
但是现在这个问题已经解决，css3出了⼀个外部字体库的功能，之前为了写这个功能，绕了很多弯路，直⾄⼼灰意冷。后来终于到了⼀个解决问题的⽅法。
⼆、解决⽅法
第⼀步：保证⾃⼰本地有需要的字体。
1、确保⾃⼰的本地有你需要的字体。
2、在⾃⼰的项⽬⽬录下⾯建⽴⼀个fonts⽂件夹，把⾃⼰需要⽤到的字体放在这个⽬录下⾯。
ps：获取字体的⽅式有很多种，可以⾃⼰到⽹上去下载⾃⼰喜欢的字体，但是很多字体下载的时候都是需要付费的，知识付费的时代，也很正常，或者可以ui⼩要 。
3、字体⽂件也要很多格式，⽐如 '.ttf'  、'.woff'  、'.eot'  、'.svg'等等各种格式，并且⼤家很清楚的是，各⼤浏览器⼚商很难做到都兼容各种字体，所以要准备各种格式的字体和代码，以适应各种各样的浏览器。
第⼆步、把字体格式转成多种字体格式。
点击即可把你本地的⼀种字体格式转换成多种字体格式。这个字体格式转换的⽹站是英⽂的，但是可以⽤⾕歌的翻译功能。（转换字体这点很重要，我之前就是因为没有转换，结果字体效果根本出不来。）
第三步、在这⾥贴上css代码和html代码
1、css代码如下：
好看的css代码@font-face {
font-family: 'YourWebFontName';    /* 这个名字可以⾃⼰定义 */
src: url('../'); /* IE9 Compat Modes */      /*这⾥以及下⾯的src后⾯的地址填的都是⾃⼰本地的相对地址*/
src: url('../?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/delicious-webfont.woff') format('woff'), /* Modern Browsers */
url('../f')  format('truetype'), /* Safari, Android, iOS */
url('../fonts/delicious-webfont.svg#YourWebFontName') format('svg'); /* Legacy iOS */
font-weight: bold;
font-style: normal;
}
div{
font-size: 20px;
font-family : 'YourWebFontName';  /* 这⾥的名字⼀定要和上⾯⾃⼰定义的名字⼀样 */
margin-bottom: 20px;
}
2、html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="./css/5.css">
</head>
<body>
<div>singlemalta</div>
<div>What are you doing?</div>
<div>I'm study the fonts in web.</div>
</body>
</html>
代码都很简单，没有什么难的地⽅，主要就是⽂字的路径填的是你⾃⼰的本地路径，还有⽤的时候写的名字要和⾃⼰定义的名字相同，关于这两点，代码⾥⾯有详细解释，不要照搬过去。
如果这⾥有什么不对的地⽅，欢迎⼤家联系我哦~

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。