看惯了千篇一律的宋体、微软雅黑等系统自带的字体，想换一个彰显个性的字体。于是在网上找了教程并在自己的博客上用了起来，感觉还不错，在这里分享给大家。（其实网上的教程非常的多，这边也只是做一个简单的搬运）。

第一步：下载字体

下载自己喜欢的字体，字体格式为.ttf

第二步：转换字体

将下载好的字体转换成.eot、.woff、.woff2三种格式，文件名可以是任意英文，没有特殊要求，可以根据自己的喜好命名（不要设置为中文就可以了）。

第三步：上传字体

将转换好的.eot、 .woff、 .woff2三种格式字体上传到自己网站任何位置，只要和后面的代码路径一致就可以了。

第四步：调用代码

打开网站/博客主题CSS文件里面的style.css文件（不同程序命名可能不一样），在最下面（位置没有固定要求）放入以下代码

@font-face {

  font-family: "light (字体名字可自行修改)";

  src: url(https://light.woff2（根据自己的字体路径修改）) format("woff2"),

       url(https://light.woff（根据自己的字体路径修改）) format("woff"),

       url(https://light.ttf（根据自己的字体路径修改）) format("truetype"),

       url(https://light.eot（根据自己的字体路径修改）) format("embedded-opentype"),

       url(https://light.svg（根据自己的字体路径修改）) format("svg");

}

上面的代码里.ttf和 .svg的文件是没有的，但是路径要和.eot、 .woff、 .woff2三种格式路径保持一致，否则字体将不会正常显示。

然后继续在style.css文件里添加以下代码

body {    

    font-family: light(名称和上面字体名称一致）!important;    

}

如果CSS文件本身就有body {的话就把font-family: light(名称和上面字体名称一致）!important;添加到原有的body {里面。

温馨提示:

字体的名字请取纯英文的，然后代码中中文解释连同前后括号部分删除如（字体名字可自行修改）

分享目前博客用的字体用法：

放到主题样式里面：

@font-face {

  font-family: "nexzhu";

  src: url(../spimes/fonts/blockdole.woff2) format("woff2"),

       url(../spimes/fonts/blockdole.woff) format("woff"),

       url(../spimes/fonts/blockdole.eot) format("embedded-opentype"),

       url(../spimes/fonts/blockdole.svg) format("svg");

}

路径呢，自己改，每个主题文件夹都不同

其中blockdole.svg是没有的，但是缺少这一行，又不会显示，所以可以自行研究一下

然后再在body里面定义

body {

    font-family: nexzhu;

}

这样就可以顺利调用了……

webmo字体用法

@font-face {

    font-family: 'webmo';

    font-display: swap;

    src: url('../fonts/webmo.eot');

    src: url('../fonts/webmo.eot?#iefix') format('embedded-opentype'), 

    url('../fonts/webmo.woff2') format('woff2'),

    url('../fonts/webmo..woff') format('woff'),

    url('../fonts/webmo..ttf') format('truetype'),

    url('../fonts/webmo..svg') format('svg');

}

顺便科普一下：

关于web中的字体, .woff, .eot, .svg

TrueType

Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

EOT– Embedded Open Type (.eot)

EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

OpenType(.otf)

OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

WOFF–WebOpen Font Format (.woff)

WOFF(Web开发字体格式)是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据(Metadata)，字体文件被压缩，以便于网络传输。

SVG(Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

IE浏览器：EOT

Mozilla浏览器：OTF，TTF

Safari浏览器：OTF，TTF，SVG

Opera：OTF，TTF，SVG

Chrome浏览器：TTF，SVG

关注公众号：

隐藏内容，扫码关注公众号“云码素材”查看，发送关键词【验证码】获取验证码

  

入群分享

我要加群：资源共享的时代，不要再单打独斗！加小编微信号加入群：xnynews(备注：云码素材入群)，qq群号：202498279,一起技术学习，资源分享！