网络字体@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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏落影的专栏

如何快速定位、分析、解决非Crash的BUG(iOS 11篇)

前言 众所周知,Bug是线上应用极力规避但又无法避免的。对于致命的Bug,我们可以通过Crash日志进行分析;对于无法复现的Bug、特定操作步骤引起的Bug、某...

44650
来自专栏Jerry的SAP技术分享

微信小程序开发系列二:微信小程序的视图设计

大家如果跟着我第一篇文章 微信小程序开发系列一:微信小程序的申请和开发环境的搭建 一起动手,那么微信小程序的开发环境一定搭好了。效果就是能把该小程序的体验版以二...

15520
来自专栏抠抠空间

Font Awesome矢量图标框架

一、font awesome简介 目前图标总数共有519个; 不依赖Javascript 矢量图形,无限缩放 免费,可用于商业 CSS...

32960
来自专栏姬小光

姬小光前端小讲堂【第002期】

在上一期“然并卵的 Hello World !”(聊天界面回复 001)发出之后,同学们的反应跟我的预期出奇的一致,那就是然!并!卵!

12420
来自专栏web编程技术分享

【手把手】制作一个简单的HTML网页

1.2K90
来自专栏雪胖纸的玩蛇日常

Vue+koa2开发一款全栈小程序(3.vue入门、Mpvue入门)

还有选最后一条时,让你选npm、yarn、No,I can handle it myselft,要选第三个No,I can handle it myselft,...

23530
来自专栏青玉伏案

iOS开发之三个Button实现图片无限轮播(参考手机淘宝,Swift版)

这两天使用Reveal工具查看"手机淘宝"App的UI层次时,发现其图片轮播使用了三个UIButton的复用来实现的图片循环无缝滚动。于是乎就有了今天这篇博客,...

33180
来自专栏GIS讲堂

Arcgis for Js之鼠标经过显示对象名的实现

在浏览地图时,移动鼠标经过某个对象或者POI的时候,能够提示该对象的名称对用户来说是很实用的,本文讲述在Arcgis for Js中,用两种不同的方式来实现该效...

21720
来自专栏子勰随笔

微信小程序开发之SVG的使用

2.4K110
来自专栏安富莱嵌入式技术分享

emWin实现ATM机界面设计,含uCOS-III和FreeRTOS两个版本

第1期:ATM机 配套例子: V6-900_STemWin提高篇实验_ATM机(uCOS-III) V6-901_STemWin提高篇实验_ATM机(FreeR...

13310

扫码关注云+社区

领取腾讯云代金券