排行榜 统计
  • 文章总数:649 篇
  • 评论总数:10704 条
  • 分类总数:4 个
  • 最后更新:4月4日

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

本文阅读 5 分钟
首页 美化技巧 正文
本文最后更新于2023年01月08日,已超过847天没有更新。如果文章内容或图片资源失效,请留言反馈,我会及时处理,谢谢!

您阅读这篇文章共耗时:

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

  第一步

  下载字体,下载自己喜欢的字体,字体格式为.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(名称和上面字体名称一致)!;添加到原有的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

本文来自投稿,不代表本站立场,如若转载,请注明出处:http://xuan.ddwoo.top/index.php/archives/774/
-- 展开阅读全文 --
PHP生命周期所经历的5个阶段
« 上一篇 01-05
装了Windows11的新电脑怎么跳过联网?
下一篇 » 01-05
------本页内容已结束,喜欢请分享------

感谢您的来访,获取更多精彩文章请收藏本站。

发表评论

本站已加入互联网信息服务许可,请规范您的言行哦~

成为第一个评论的人

作者信息

热门文章

珍惜时间哦~

今日一言

- -
加载中...
换一句

标签TAG

热评文章