更换网站字体详细教程(网页更换字体)

追月流涟
萝莉JK制服

更换网站字体详细教程(网页更换字体)

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

第一步

下载字体,下载自己喜欢的字体,字体格式为.ttf,这里推荐一个字体网站非常的不错:

第二步

转换字体,将下载好的字体转换成.eot、 .woff、 .woff2三种格式,文件名可以是任意英文,没有特殊要求,可以根据自己的喜好命名(不要设置为中文就可以了)。这里推荐一个在线转化的网站:

第三步

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

第四步

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


@font-face {
font-family: "light (字体名字可自行修改)";
src: url((根据自己的字体路径修改)) format("woff2"),
url((根据自己的字体路径修改)) format("woff"),
url((根据自己的字体路径修改)) format("truetype"),
url((根据自己的字体路径修改)) format("embedded-opentype"),
url((根据自己的字体路径修改)) format("svg");
}


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

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


body {
font-family: light(名称和上面字体名称一致)!important;
}


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

注意

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

科普一下

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

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

EOT– Open Type (.eot)

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

(.otf)

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

WOFF– Font Format (.woff)

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

SVG( Vector ) Fonts (.svg)

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

IE浏览器:EOT

浏览器:OTF,TTF

Safari浏览器:OTF,TTF,SVG

Opera:OTF,TTF,SVG

Chrome浏览器:TTF,SVG


-----本页内容已结束,喜欢请分享-----


© 版权声明
版权声明
本站网站名称:追月流涟教程网
本站永久网址:https://www.zyds666.cn
网站侵权说明: 本站采用 CC BY-NC-SA 4.0 国际许可协议 进行许可,转载或引用本站文章应遵循相同协议。
1、本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长QQ进行删除处理。
2、本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
3、本站禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报。
4、本站资源大多存储在云盘,如发现链接失效,请联系我们将会第一时间更新。
站长邮箱:abcdefghijklm1211@qq.com

您需要 登录账户 后才能发表评论

发表评论

快捷回复: 表情:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdogemojiemoji1emoji10emoji11emoji12emoji13emoji14emoji15emoji16emoji17emoji18emoji19emoji2emoji20emoji21emoji22emoji23emoji24emoji25emoji26emoji27emoji3emoji4emoji5emoji6emoji7emoji8emoji9
评论列表 (暂无评论,361人围观)

还没有评论,来说两句吧...

取消
微信二维码
微信二维码
支付宝二维码
我是分割线
我也是有底线哒~