当前位置:首页 > 技术教程 > 其他技术 > 正文内容

网站如何嵌入自定义TFF字体?CSS自定义网站字体教程

xiaohan7个月前 (11-25)其他技术156

看到别的网站字体特别好看,于是小编昨天也改了一下本站的字体,要知道一个别具一格的网站风格是离不开字体的。然后到处搜了一些教程,几经波折终于弄成功了,然后把教程分享给大家希望对大家前端开发有所帮助!

首先我们要知道CSS,CSS是Cascading Style Sheet的缩写,是一种叫做样式表(stylesheet)的技术。也有的人称之为层叠样式表(Cascading Stylesheet)。它实际的功能就是用来控制一些控件的样式、美化网页的。它不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。在主页制作时采用CSS技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。

上面讲了一些题外话,给那些新手站长或者基础差的科普一下。

首先我们这里讲到TrueType字体文件也就是我们说的TTF后缀格式的文件,这边我在脚本之家上下载了一个上首简宋纤细体,大家点击这个链接就可以下载到。

QQ截图20201125124411.png

下载之后上传到我们的网站根目录的模板(template)文件下的网站样式style/字体font下即可,不同程序目录可能会不同,上传到自己模板下的font字体文件下即可,我们为了规范化网站目录实际上传到哪里都一样。我们把上首简宋纤细体.ttf改为iso0-cn.tff,文件名可以任意只要不改变后缀就行。

QQ截图20201125125554.png

找到你网站模板的css文件,这里我们可以通过搜狗浏览器的F12开发者工具来配合查看,从下图我们可以看出我们的css文件路径,然后在宝塔里面找到然后打开它。

QQ截图20201125125357.png打开css文件,我们在css最后面载入代码

@font-face {
      font-family: iso0-cn;
      src: url('./fonts/iso0-cn.ttf') format('truetype');
      font-weight: normal;     //字体粗细范围 可不填
      font-style: normal;      //字体样式  可以不填
    }

QQ截图20201125125930.png

取值说明

1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”

2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;

3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;

4、weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。

然后想在哪个区块下修改这个字体就在那个区块的style样式里面添加:font-family:"YourWebFontName;就可以了,这里我以自己的网站的文章标题举个例子。

QQ截图20201125131206.png

我在我的H2的css样式里面添加font-family:iso-cn;字体就替换成功了,是不是非常简单?

如果想要全站都成为这个字体,这要在网站的css里找到body的样式把font:family:改为你嵌入的那个字体名即可。

有些站长修改之后会发现没有效果,检查了路径也没有错,这要考虑缓存的原因,是不是页面代码还没刷新过来。

其次就是服务器的宽带是不是太小,我这个站用的1M的小宽带,之前没嵌入字体还能秒加载,后面嵌入字体卡的不行,于是赶紧套了一个CDN网络加速,一般cdn都是宽带比较大的服务器组建的,所以可以完美解决这个问题。

服务器死机、延迟太高可以联系QQ3200661732购买,可测试性能,价格美丽。

版权声明:本站部分文章资源来源于网络搜集,如有侵犯到贵司利益请致信站长删除,Email:61018648@qq.com

本文链接:https://www.iso0.cn/post/51.html

分享给朋友:

相关文章

2021年最新前端基础学习课程

2021年最新前端基础学习课程

教程介绍前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,合适的动效设计,...

ZKEYS(易商付)第三方支付插件正式发布

ZKEYS(易商付)第三方支付插件正式发布

由于Zkeys的一波全民IDC活动,1000元大陆版活动后,又收购了IDC管理系统巨头星外,后面1000元全套系统活动让zkeys门槛变低许多。所有很多人就求支付的插件,因为ZK官方只有官方支付的接口...

5小时零基础入门小程序云开发

5小时零基础入门小程序云开发

课程介绍本套课程带领大家零基础入门小程序云开发。摆脱后台自己实现小程序后台,学会音视频小程序的开发,学会小程序图片的上传与管理,学习人工智能识别图片,用小程序模仿微信朋友圈,实现一个云相册。学习地址百...

建站VPS安装Linux系统还是选择Windows系统?

建站VPS安装Linux系统还是选择Windows系统?

我们在购买了VPS或者云服务器之后,会选择安装Windows系统或者Linux系统,如果用来建站那么到底用哪种系统比较好呢?下面爱搜资源来谈谈个人的看法。想要快速建站安装所需环境,安装一款主机管理软件...

Linux系统VPS服务器回程路由测试脚本

Linux系统VPS服务器回程路由测试脚本

Linux操作系统VPS服务器回程路由测试脚本命令使用方法:连入SSH终端先输入下面命令下载下来脚本wget https://raw.githubusercontent.com/nanqin...

vps主机如何测试上下行网速?Speedtest一键测速脚本

vps主机如何测试上下行网速?Speedtest一键测速脚本

下面爱搜资源说下如何在vps查看宽带的上传下载速度,分享的是Sppedtest.net的一键测速脚本。首先连接服务器终端,执行下面的命令yum install docker sy...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。