问题:
在开发过程中我们经常在设计图 中看到一些特殊字体,这些字体并不是系统自带的字体,那要怎么引用特殊字体呢??
兼容性 :
IE9 只支持 .eot 类型的字体, Firefox, Chrome, Safari, 和 Opera 支持 .ttf 与.otf 两种类型字体.
注意: IE 8 及更早IE版本不支持@font-face 规则.
简单上手的使用过程:
1.先看文件放置位置,这里font文件夹下有一个PWChal.ttf 字体,并且是TrueType格式。
设置css @font-face
<style>
@font-face{
font-family: myFirstFont; //'myFirstFont'是自己起得特殊字体的名称
src: url(font/PWChalk.ttf) format('truetype'); //url(引入字体路径,相对和绝对路径都可以,路径正确就可以了,);format(字体类型)
font-weight:100;
font-style:normal;
}
.fonts{
font-size: 30px;
font-family: myFirstFont; // 给dom设置特殊字体font-family:值就是上边自己为特殊字体起的名称
}
</style>
html代码
<div class="fonts">HelloWord!00888999</div>
参考链接:https://blog.csdn.net/cddcj/article/details/77506408
简单介绍@font-face语法规则:
@font-face {
font-family: YourWebFontName;
//src: <source> [<format>],<source> [<format>];
src: url('fontName.woff') format('woff'),
url('fontName.ttf') format('truetype'),
url('fontName.svg#fontName') format('svg');
font-weight: <weight>;
font-style: <style>;
}
font-family: <YourWebFontName> :自定义字库名称(一般设置为所引入的字库名),后续样式规则中则通过该名称来引用该字库。
src :设置字体的加载路径和格式,通过逗号分隔多个加载路径和格式 (多个字体类型的话还可以分成很多个@font-face 单个单个命名字体名称)
srouce :字体的加载路径,可以是绝对或相对URL。
format :字体的格式,主要用于浏览器识别,一般有以下几种——truetype,opentype,truetype-aat,embedded-opentype,avg等。
font-weight 和 font-style 和之前使用的是一致的。
src属性后还有一个 local(font name) 字段,表示从用户系统中加载字体,失败后才加载webfont。
src: local(font name), url("font_name.ttf")
详细讲解 :
语法规则,兼容浏览器,字体格式说明,字体下载网站参考链接 https://www.cnblogs.com/moqiutao/archive/2015/12/23/5070463.html 均有详细介绍