css引用外部字体的方法：
第一步：保证自己本地有需要的字体。
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> <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>
以上就是css怎么引用外部字体？的详细内容，更多请关注0133技术站其它相关文章！
