修改网页自定义字体的CSS代码+图文教程

HI,五一玩的怎么样?除了人山人海,高速堵车,高铁全是人之外其他都还好啦,是不是,哈哈哈~~~好了,不闹了,在假期有朋友问我,想要修改网页的字体怎么办?怎么更换网页的字体,又如何引用自定义字体呢?其实很简单,今天简单写个教程,需要能给小白一丢丢的帮助吧。

首页我们要引用字体文件代码,代码参考如下:

@font-face {
    font-family: 'talklee';
    font-display: swap;
    src: url('./font/talklee.eot');
    src: url('./font/talklee.eot?#iefix') format('embedded-opentype'),         url('./font/talklee.woff2') format('woff2'),       url('./font/talklee.woff') format('woff'),       url('./font/talklee.ttf') format('truetype'),       url('./font/talklee.svg') format('svg');}

其中@font-face可以加载服务器端的字体到浏览器端,这样我们就可以不受客户端字体库的限制。一般来说有四种格式的字体文件即可覆盖所有浏览器,这四种格分别为:

.EOT:适用于Internet Explorer 4.0+。

.TTF或.OTF:适用于Firefox 3.5、Safari、Opera。

.SVG:适用于Chrome、IPhone。

.WOFF:转为web字体指定的字体格式标准,被新版本浏览器广泛支持。

确保链接正确,建议在采用的是相对路径,当然大家也可以使用绝路径。

body a,body {
    font-family:talklee!important;}

font-family:为字体名称,可自定义但是需要确保两次“font-family引用的名称一致才行。

附上一张引用自定义的效果图:

修改网页自定义字体的CSS代码+图文教程 第1张

PS:获取@font-face所需字体格式,特殊字体已经在你的电脑中了,现在我们需要想办法获得@font-face所需的.eot,.woff,.ttf,.svg字体格式。要获取这些字体格式,同样需要第三方工具或者软件来实现,给大家推荐一个在线转换工具传送门:Font Squirrel

在线转换工具部分截图:

修改网页自定义字体的CSS代码+图文教程 第2张

上传本地ttf格式文件,勾选“yes”转换完成点击“down”下载,然后把下载到的字体文件上传到服务器空间,引用主题路径就OK啦,下图是转换下载到本地的图片,大概就这样啊吧,我的演示文字小,所以可能不全,只需要字体文件,其他文件和css都不需要的。

修改网页自定义字体的CSS代码+图文教程 第3张

OK,教程已结束,多折腾,多收获,不怕出错就怕不出错,有问题留言反馈,撤~~~




【免责声明】:

本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

【关于转载】:

本站尊重互联网版权体系,本站部分图片、文章大部分转载于互联网、所有内容不代表本站观点、不对文章中的任何观点负责、转载的目的只用于给网民提供信息阅读,无任何商业用途,所有内容版权归原作者所有
如本站(文章、内容、图片、视频)任何资料有侵权,先说声抱歉;麻烦您请联系请后台提交工单,我们会立即删除、维护您的权益。非常感谢您的理解。

【附】:

二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

注:本站资源来自网络转载,版权归原作者和公司所有,如果有侵犯到您的权益,请第一时间联系我们处理!

-----------------------------------------------------------------------------------------------------------

【版权声明】:

一、本站致力于为源码爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、如有内容侵犯您的版权或其他利益的,请编辑邮件并加以说明发送到站长邮箱。站长会进行审查之后,情况属实的会在三个工作日内为您删除。
-----------------------------------------------------------------------------------------------------------


内容投诉
源码村资源网 » 修改网页自定义字体的CSS代码+图文教程
您需要 登录账户 后才能发表评论

发表评论

欢迎 访客 发表评论