网络字体@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 条评论
登录 后参与评论

相关文章

来自专栏简书专栏

基于bs4+requests爬取世界赛艇男运动员信息

2018年8月22日笔记 新手学习如何编写爬虫,可以注册1个网易账号,在网易云课堂上学习《Python网络爬虫实战》,链接:http://study.163....

864
来自专栏deepcc

在网站制作中随时可用的10个 HTML5 代码片段

34214
来自专栏无所事事者爱嘲笑

react-navigation 中的多tabs嵌套时内部tabs无法正常切换问题

2015
来自专栏喵了个咪的博客空间

基于PhalApi的Smarty拓展

基于PhalApi的Smarty拓展 ? 前言 先在这里感谢phalapi框架创始人@dogstar,为我们提供了这样一个优秀的开源框架. 用过的童鞋都知道Ph...

2855
来自专栏macOS 开发学习

一步一步,开始上手Mac 开发(三)

1.1 先选中MasterViewController.xib,重新调整view 的尺寸和排列内部的各个控件,(以你喜欢的方式)让控件看起来更协调,而且能够全部...

742
来自专栏DeveWork

移动Web 开发中的一些前端知识收集汇总

在开发DeveMobile 与EaseMobile 主题 的时候积累了一些移动Web 开发的前端知识,本着记录总结的目的,特写这篇文章备忘一下。 要说移动Web...

1815
来自专栏ionic3+

【Appetite】ionic3实录(三)修改自定义图标

我们需要把它裁切并转成svg格式再生成字体图标,比较繁琐,而我新系统目前也没有装相应软件,所以这里不采用这些图标,选用网上已有类似的字体图标来代替。

632
来自专栏小李刀刀的专栏

用JavaScript动态输出的JS脚本不能执行

随着Ajax的越来越多地运用,HTML的内容又开始由“所见即所得”开始向“所见未必所得”发展了。这就是动态改变网页内容的魅力所在吧。 在公司产品动易2006版...

3195
来自专栏腾讯IVWEB团队的专栏

关于 javascript 错误捕获

我们team将出现错误的javascript代码取名为badjs,也有一个开源的badjs项目,用于捕获和分析js错误,并提供了一些基础的报表数据分析。

2310
来自专栏闻道于事

JavaScript事件(二)

例题顺序: 1.子菜单下拉 2.图片轮播 3.选项卡效果 4.进度条制作 5.滑动效果 6.滚动固定效果 1.子菜单下拉 1 <!DOCTYPE html...

2436

扫码关注云+社区