网络字体@font-face 如何处理网页中的特殊字体

HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑、宋体、黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体,又不会下载太大的字体文件,来装饰我们网站的部分呢?一起来看看我们CSS3的新功能吧!

如何在网站中使用比较特殊的字体

随着网页的发展,网页中出现了越来越多的字体种类,原有的微软雅黑以及宋体早就无法满足设计的需要,那么,如何在网站中使用比较特殊的字体(如“华文行楷”)来装饰我们网站的部分呢?作为前端开发的人员都知道,在自己电脑上安装字体查看网页没有什么作用,因为网页会上传到服务器,访问网站的用户电脑上不一定会有这种字体,除非在客户端安装这个字体,才能保证每个用户网页中能够正常显示。如果客户端没有安装,那么页面渲染会调用客户端电脑上已有的字体来替代我们定义的字体。

在以前的页面制作当中,一旦出现这些特殊字体,我们通常会使用图片来代替,不过这样的做法只适合于使用比较少的特殊字体的网站。而且用图片代替文字的做法,并不方便修改,也不利于SEO搜索引擎优化(譬如LOGO使用了h1标签,却由于字体很特殊而使用了图片,那么h1的作用基本等同于没有发挥出来)。

在CSS2.0 规范中有一个东西,@font-face(IE4.0就存在),后来在 CSS2.1 草案中又被删掉。后来又被纳入到CSS3草案当中。这个东西就是今天要跟大家分享的东西——自定义网络字体。

网络字体的支持程度(截止到2015年04月29日)

我们可以使用该属性进行自定义字体的设置,换句话说,使用它之后,我们就能够在网络中自由的使用自定义字体,先来看其基本的语法:

@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}

其中font-weight和font-style都可以进行设置,也可以使用默认值。

第一步设置的是font-family的名字,在这里设置好之后。网页中哪个部分需要使用这种字体,就输入font-family(对应的名字)即可。

每个字体都有src的属性,包含source以及format定义,source是字体的本地名。(例如:华文行楷的字体名为“STXINGKA”),为所有的字体进行这样的设置的作用是:当用户本地已经下载了同样字体的时候,可以节约网上下载的成本。format是用于提示该资源 URL 所引用的字体格式,如果浏览器在本地没有找到这种字体,那么会将url中设置的字体加载到页面当中。设置自定义网络字体,必须设置src以及font-family。

关于字体格式以及浏览器对字体的支持程度表:

实际代码示例:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>H5course</title>
<style>
@font-face {
    font-family: 'STXINGKA';
    src: local('STXINGKA'), url('STXINGKA.ttf') format('truetype');
}
.con {
    font-family: 'STXINGKA';
    font-size: 44px;        
}
</style>
</head>
<body>
<div class="con">独行冰海</div>
</body>
</html>

欢迎沟通交流~HTML5学堂

如何制作特殊字体

讲到这里,可能有的人会说,的确可以引入,但是一个字体包实在是太大了,如果直接让用户下载一个字体包,一费流量,二加载速度慢,没准等到字体加载完成的时候,用户已经关闭页面了。这个考虑的确是有必要的。

国外的字库只用几十kb 的大小(英文字母 26大写+26小写 再加些标点符号),而我们的中文字库动不动就几M甚至 几十M不等,为了美化我们的网站而在字体上面增加几M的流量是很不明智的选择。

接下来就为大家介绍解决的方法:我们完全可以把网页中出现的特殊字体提取出来,把没有必要的去除掉,制作一个精简版的字库供网页使用。

此时会使用到font creator 软件。基本的操作步骤为:

1)打开 font creator ,导入想精简的字库文件(字体在控制面板中可以找到,复制一份到桌面即可)

2)获取文字的unicode码。

可以通过js的 escape() 方法 实现:var uni = escape("独"); console.log(uni); %u 后面的 4位数字即为 unicode码。

3)按 ctrl + F 调出查找功能,根据字符的 unicode 码进行查找,找到相应的汉字。查找时需要添加$符号

4)新建一个字体库,并把多余的字删掉,之后在空白处点击右键选择添加,生成一个空白的字体存放单元,ctrl+c完整字库中需要添加的汉字,选择新字库中新建的空白字体存放单元,ctrl + v粘贴,覆盖即可

5)选择 映射 选项卡,在映射区块右侧 输入 字体的 unicode 码,点击添加到此,我们的字体库就制作完成啦~~~

原文发布于微信公众号 - HTML5学堂(h5course-com)

原文发表时间:2015-11-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

1 条评论
登录 后参与评论

相关文章

来自专栏ionic3+

【Appetite】ionic3实录(四)微调Segment,并引出自定义组件概念

用ionic3来实现就是采用segment组件。其中ios和android的样式分别如下两图:

692
来自专栏数据小魔方

可视化基础——字体篇

今天是2015的最后一天了,也是小魔方持续更新的第11天,感谢众多小伙伴们的支持和关注,预祝大家元旦快乐,新的一年一切都更美好!!! 之前两篇给大家分享了一些...

3228
来自专栏葡萄城控件技术团队

Wijmo 更优美的jQuery UI部件集:从wijwizard和wijpager开始

本文演示了如何使用Wijmo的其中两个部件,wijwizard 以及 wijpager。如果你期望看到Wijmo的其他文章,请参阅Wijmo 更优美的jQuer...

1917
来自专栏知晓程序

如何从零开始,做一个跑步小程序?| 实战案例

1114
来自专栏开源优测

[快学Python3]浏览Python Manuals

概述 通常情况下,初学者都不愿意直接去浏览Python Manuals,即Python自带的官方文档。尤其是只有英文版的情况下,初学者更加不会去使用该官方文档了...

2479
来自专栏前端笔记

【JavaScript 理论知识】VUE.JS之初体验:Animate.css封装!

对于经常和动画开发打交道的开发者对于Animate.css这个动画库不会陌生,它把一些常见的动画效果都封装起来了,非常实用。 image.png 前言...

3506
来自专栏逸鹏说道

无图片字体icon

W3C 仍然在对 CSS3 规范进行开发。不过,现代浏览器已经实现了相当多的 CSS3 属性。CSS3也从前几年的初试探到如今的广泛应用。最近折腾这方面的东西其...

3249
来自专栏前端小叙

react-router实现tab页面切换,并解决选中样式首页始终选中问题

443
来自专栏全栈架构

Elasticsearch Java 中文手册,开源中国推荐,开发者头条精选

本手册由 全科 翻译,并且整理成电子书,支持PDF,ePub,Mobi格式,方便大家下载阅读。

463
来自专栏用户2442861的专栏

chrome使用技巧(看了定不让你失望,不错)

之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了。对此特意了解了一番(也就是在他的博文上进行了一些总结和了解一些其...

251

扫描关注云+社区