本文作者:心月

自定义网站字体设置3步轻松搞定

心月IT博客 2017-06-16
自定义网站字体设置3步轻松搞定摘要:很多时候我们在设置网站的时候,想让自己的网站变得非常有个性,就想给自己网站的文字自定义字体,但又担心,访客使用的系统里没有你设置的这种字体,所以只能无奈放弃。今天心月就和大家分享一个网站文字字体自定义设置的方法,让即便没有你设置的字体的访客也能看到你设置的字体效果。

        很多时候我们在设置网站的时候,想让自己的网站变得非常有个性,就想给自己网站的文字自定义字体,但又担心,访客使用的系统里没有你设置的这种字体,所以只能无奈放弃。

        今天心月就和大家分享一个网站文字字体自定义设置的方法,让即便没有你设置的字体的访客也能看到你设置的字体效果,而且只需要3步就能轻松搞定。

1、字体上传

        将你准备使用的字体上传的网站空间。任意位置都可以。因为不同浏览器对字体版本的兼容性不一样,所以我们得把同一字体的不同版本都上传到网站空间。

不同版本字体的浏览器适用说明:

.TTF或.OTF,适用于Firefox 3.5、Safari、Opera
.EOT,适用于Internet Explorer 4.0+
.SVG,适用于Chrome、IPhone

2、字体声明

        上传到网站空间的字体不能直接使用,必须通过css声明之后才能适用。css字体声明的方法:

MyCustomFont:声明字体的名称,这个名称你可以自己任意命名,但不能包含中文和特殊字符。

src: url("Quasart.ttf") :待使用字体的路径,即你刚刚上传到网站空间的字体的位置。

3、字体使用

        字体声明好之后就可以使用了,声明字体的使用和其他常规字体的使用方法是一样的,只需给需要用的这个字体的文字加上fong_family属性即可。

        注意:在使用之前必须声明。我们可以单独写一个css字体声明文件,在使用的时候只需在调用声明文件就可以了。

        到此,自定义字体的设置就完成了。

文章版权及转载声明:

本文由 心月IT技术博客 博主整理于 2017-06-16
若转载请注明原文及出处:https://www.xinyueseo.com/jianzhan/67.html

分享到:
赞(
发表评论
快捷输入:

验证码

    评论列表 (有 1 条评论,人围观)参与讨论
    网友昵称:心月IT博客网友
    心月IT博客网友游客2020-11-17回复
    能在详细一点嘛?