一站式下载学习分享平台 友情链接

网站首页 源码插件 正文

网页字体的设置

皮皮娃学习网 2020-07-13 源码插件 28 ℃ 0 评论

设置网页上的字体,使用CSS的font-family就可以了,如下CSS设置了微软雅黑字体:

font-family:微软雅黑;

然后,网页中使用到这行CSS代码的地方就呈现微软雅黑字体的效果。

但是,这一切是如何发生的呢?

其实,CSS代码制定的字体能够在网页上看到效果,有一个前提,那就是你的电脑上要安装了这个字体的字库,我们通常称为字体文件。字体文件常见的后缀是 .ttf(True Type字体),.otf(Open Type字体)以及.woff(Web Open Font Format,简称WOFF)。(还有只有IE9支持的.eot字体文件)

浏览器就像一个脚本解释器,按照从网站服务器下载文件,解析并呈现,我们可以说这个过程为渲染。因此,电脑中有这个字体,网页上就能显示这个字体;如果电脑中没有CSS代码中指定的字体,浏览器也没有办法,只能按照某种规则,采用默认字体来显示网页。

下面的CSS代码,同时设置了多个字体,浏览器按照顺序来选择,直到找到第一个本地字体,或者都没找到,采用默认字体:

font-family: Tahoma, Helvetica, Arial, Microsoft Yahei,微软雅黑, STXihei, 华文细黑, sans-serif;

什么是在线字体(Web Font)

前文讲述的浏览器在电脑上寻找字体的过程,使用的是本地字体。如果本地没有的字体,浏览器还想用,就要使用在线字体。

以前的CSS,网页设计师不得不使用用户计算机上已经安装的字体,即只能使用本地字体。现在的CSS3,网页设计师可以使用他喜欢的任何字体。当你有了要使用的字体的字体文件时,只需简单的将字体文件包含在网站中,它会自动下载给需要的用户,在网页上显示出这种字体的效果。

这时,你需要用到CSS3的@font-face规则:

<style>

@font-face

{

font-family: myFont;

src: url(sansation_light.woff);

}

div

{

font-family:myFont;

}

</style>

以上代码定了一个字体叫做myFont,对应了一个字体文件的位置。

然后在后面的CSS代码中,我们就可以直接使用了。

中文在线字体的问题

使用在线字体存在一个问题,就是字体文件的大小。

浏览网页的用户电脑上如果没有这个字体,就必须要下载CSS代码中指定的字体文件。

对于英文字体文件来说,不管什么英文单词,都有26个字母的组合,所以英文的字体文件很小;而中文则不是这样,由于每个汉字的写法都不同,导致字体文件很大,以便都是10M以上,让用户在浏览网页的时候下载10M以上的字体文件,这个很不现实。

因此,有人就想到,是否可以把中文字体文件也做小。思路是:网页上不是所有的地方都要使用这么特别的字体,只有几个特别地方需要用到,我们是否可以制作一个字体文件,只包含这几个字,这样字体文件就变小了,下载也不存在问题。

这个思路是可行的,有人已经做到了,网上能够搜索到他们。比如:有字库。

本文标题:网页字体的设置
本文链接:https://www.ppwxxw.com/post/349.html
作者授权:除特别说明外,本文由 皮皮娃学习网 原创编译并授权 皮皮娃学习网 刊载发布。
版权声明:本文不使用任何协议授权,您可以任何形式自由转载或使用。

Tags:SEO优化Linux教程wordpress疑难杂症建站教程

< 皮皮娃学习网 >
如有密码均为:ppwxxw.com
天若有情天亦老、人间正道是沧桑
本站资源软件和源码 文章大部分为网上收集,如侵犯您的权利,请告知管理员,我们会及时删除,感谢理解.

站长邮箱:ppwxxw@ppwxxw.com

本文暂时没有评论,来添加一个吧(●'◡'●)


取消回复欢迎 发表评论:

搜索
网站分类
最新文章
标签