最近有人卖字体的插件，其实弄个代码也很简单。
下载自己喜欢的字体
下载自己喜欢的字体，字体格式为.ttf，这里推荐一个字体网站：http://www.zhaozi.cn/s/all/ttf/
转化字体格式
将下载好的字体转换成.eot、 .woff、 .woff2三种格式，文件名可以是任意英文，没有特殊要求，可以根据自己的喜好命名（不要设置为中文就可以了）。这里推荐一个在线转化的网站：https://www.fontke.com/tool/convfont/
上传字体至服务器
将转换好的.eot、 .woff、 .woff2三种格式字体上传到自己网站任何位置，只要和后面的代码路径一致就可以了。
插入CSS代码
@font-face {
font-family: "ziti";
src: url(https://你的文件路径/ziti.woff2) format("woff2"),
url(https://你的文件路径/ziti.woff) format("woff"),
url(https://你的文件路径/ziti.ttf) format("truetype"),
url(https://你的文件路径/ziti.eot) format("embedded-opentype"),
url(https://你的文件路径/ziti.svg) format("svg");
}
body {
font-family: ziti
important;
}以上代码的url链接为字体文件路径链接，可自行更改，"ziti"为字体名称，比如ziti.ttf,ziti.woff等等，在与字体文件名称相同的前提下可随意更改英文。放在style标签之内就可以了!
如果大家闲麻烦可以直接把我的代码复制进去就可以了!
<style type="text/css">
@font-face {
font-family: "moonbridge";
src: url("https://ku.oioweb.cn/Resources/font/造字工房悦圆/moonbridge.woff2") format("woff2"),
url("https://ku.oioweb.cn/Resources/font/造字工房悦圆/moonbridge.woff") format("woff"),
url("https://ku.oioweb.cn/Resources/font/造字工房悦圆/moonbridge.ttf") format("truetype"),
url("https://ku.oioweb.cn/Resources/font/造字工房悦圆/moonbridge.eot") format("embedded-opentype"),
url("https://ku.oioweb.cn/Resources/font/造字工房悦圆/moonbridge.svg") format("svg"),
url("https://ku.oioweb.cn/Resources/font/造字工房悦圆/moonbridge.otf") format("opentype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
body{
font-family: 'moonbridge'
}
</style>顺便科普一下
关于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
评论 (0)