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

一、需求分析

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

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

二、解决方法

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

1、确保自己的本地有你需要的字体。

2、在自己的项目目录下面建立一个fonts文件夹，把自己需要用到的字体放在这个目录下面。

ps：获取字体的方式有很多种，可以自己到网上去下载自己喜欢的字体，但是很多字体下载的时候都是需要付费的，知识付费的时代，也很正常，或者可以找ui小姐姐要。

3、字体文件也要很多格式，比如 '.ttf' 、'.woff' 、'.eot' 、'.svg'等等各种格式，并且大家很清楚的是，各大浏览器厂商很难做到都兼容各种字体，所以要准备各种格式的字体和代码，以适应各种各样的浏览器。

第二步、把字体格式转成多种字体格式。

点击这里即可把你本地的一种字体格式转换成多种字体格式。这个字体格式转换的网站是英文的，但是可以用谷歌的翻译功能。（转换字体这点很重要，我之前就是因为没有转换，结果字体效果根本出不来。）

第三步、在这里贴上css代码和html代码

1、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#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>

代码都很简单，没有什么难的地方，主要就是文字的路径填的是你自己的本地路径，还有用的时候写的名字要和自己定义的名字相同，关于这两点，代码里面有详细解释，不要照搬过去。

如果这里有什么不对的地方，欢迎大家联系我哦~

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

猜你喜欢