首页 » 网站建设 »

网页字体的设置

2017年9月29日 / 74次阅读
CSS

打开支付宝首页,搜索“529018372”,即可领取红包!可重复领。

特色图片

设置网页上的字体,使用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以上的字体文件,这个很不现实。

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

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

本文链接:http://www.maixj.net/wz/wangye-ziti-shezhi-16583
云上小悟 麦新杰(QQ:1093023102)

相关文章

评论是美德

《网页字体的设置》有3条评论

无力满足评论实名制,评论对非实名注册用户关闭,有事QQ:1093023102.

  • 麦新杰

    font-family有个生效顺序,优先使用最前面的那个字体,如果电脑上没有,就往后找,直到找到,或者都找不到,就使用浏览器默认的字体。 [ ]

  • 麦新杰

    What is WebFonts? WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF"). [ ]

  • 麦新杰

    应该可以通过浏览器来设置其支持的默认字体。 [ ]


前一篇:
后一篇:

栏目精选

云上小悟,麦新杰的独立博客

栏目

支付宝红包.每天领一次.

支付宝扫码领红包

©Copyright 麦新杰 Since 2014 云上小悟独立博客版权所有 备案号:苏ICP备14045477号-1。云上小悟网站部分内容来源于网络,转载目的是为了整合信息,收藏学习,服务大家,有些转载内容也难以判断是否有侵权问题,如果侵犯了您的权益,请及时联系站长,我会立即删除。

网站二维码
go to top