HTML中的自定义字体的使用

HTML中的自定义字体的使用

实践

说到自定义字体和符号，也是我最近在做一个静态页面的时候遇到的一个问题，就比如上图，一个定位题图片，之前也没有遇到过使用自定义的字体及符号，可能是我的知识短浅吧，所以遇到一些图上不知道怎样实现的符号就直接用PS扣下来，当时为了能实现效果也是不择手段，直到发现了这个自定义符号和字体后，我感觉我又行了。

 接下来就给大家分享一下我的实现思路和步骤

在这之前，当大家想使用自定义字体的时候需要去下载自定义字体的文件，然后就开始我们的操作。
在HTML中有这样一个规则它叫做@font-face。

@font-face的使用方式

@font-face {
	font-family: 'icomoon';
	src: url('../fonts/icomoon.eot?axvffw');
	src: url('../fonts/icomoon.eot?iefix') format('embedded-opentype'),
		url('../fonts/icomoon.svg?axvffw#icomoon') format('svg'),
		url('../fonts/icomoon.woff?axvffw') format('woff'),
		url('../fomts/icomoon.ttf?axvffw') format('truetype');
	font-weight: normal;
	font-style: normal;
}

这里呢是我写的一段代码，在@font-face规则中必须有的属性是font-family和src其他的属性呢都是可选的。
接下来说一下这两个属性：

font-family:/*这个属性主要是给这个字体去一个名字，当然了我们习惯使用字体文件的名称给他取名*/
src:/*这个属性主要是将我们传入的文件使用url的链接方式链接我们的文件*/

相信大家都注意到了在url后面有一个单词format，这个是什么意思呢，我来给大家解释一下，这个format后面跟的参数主要是来向浏览器表明你自定义的字体文件是以什么为后缀的，我这里使用了以四种后缀样式的自定义字体文件，大家可以看到：eot,svg,woff,ttf,这四种不同的后缀在format中使用的参数也是不同的，eot---->embedded-opentype，svg—>svg,woff—>woff,ttf—>truetype,我感觉这里大家知道怎么用就可以了。
在这里还有两个属性一个是font-weight和font-style。
这两个属性前者代表字体的粗细，后者代表字体应该是怎样样式，这里我就直接给了默认值，当然默认值就是正常没有任何变化。

总结

这篇文章呢也是我最近做一个小的静态页面的时候所使用到的知识，可能会帮助到大家，也一定会有不全面的地方，希望有大神可以在评论里指导一番，有不足的地方希望大家海涵。