Css Font

日期:2015-11-13 10:16 | 标签: | 阅读:776

字体设置是做网页开发不可回避的一个问题,这里收集一些处理细节并做简单记录。

font-family

你可以选择浏览器自带字体和自定义字体。自带的话直接引用名字就行,自定义得花要麻烦点。特别注意的是,由于浏览器支持的字体格式不一,需要提供好几种字体格式,不过你不用担心下载哪个,因为浏览器支持哪个就会自动下载哪个,当你下载不全所有字体格式时,你也可以使用网上的字体格式转换工具进行转换。

1. TrueType (.ttf),Windows和Mac系统最常用的字体格式,其最大的特点就是它是由一种数学模式来进行定 
义的基于轮廓技术的字体,这使得它们比基于矢量的字体更容易处理,保证了屏幕与打印输出的一致性。同时,
这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

2. EOT Embedded Open Type (.eot),嵌入字体格式(EOT)是微软开发的一种技术,允许 OpenType 字嵌
入到网页并可以下载至浏览器渲染,浏览器根据 CSS 中 @font-face 的定义,下载,渲染这种 .EOT 后缀的字
体文件。这些文件只在当前页活动的状态下,临时安装在用户的系统中。

3. OpenType (.otf),是一种可缩放字型(scalable font)电脑字体类型,采用PostScript格式,是美国微软公
司与Adobe公司联合开发,用来替代TrueType字型的新字型。这类字体的文件扩展名为.otf,类型代码是 
OTTO,现行标准为OpenType 1.4。OpenType最初发表于1996年,并在2000年之后出现大量字体。它源于
微软公司的TrueType Open字型,TrueType Open字型又源于TrueType字型。OpenType font包括了Adobe
CID-Keyed font技术。Adobe公司已经在2002年末将其字体库全部改用OpenType格式。  

4. WOFF – Web Open Font Format (.woff),相对于 TrueType 和 OpenType ,WOFF(Web开发字体格式)
是一种专门为了 Web 而设计的字体格式标准,它并不复杂,实际上只是对于 TrueType / OpenType 等字体格
式的封装,并针对网络使用加以优化:每个字体文件中含有字体以及针对字体的元数据(Metadata),字体文
件被压缩,以便于网络传输,并且不包含任何加密或者 DRM 措施。包括 Adobe、 Lino Type、Monotype 在
内的几乎所有主要的字体供应商都加入到支持 WOFF 的行列中来

5. SVG (Scalable Vector Graphics) Fonts (.svg),顾名思义,就是使用SVG技术来呈现字体,还有一种gzip压
缩格式的SVG字体.svgz。SVG可缩放矢量图形(Scalable Vector Graphics)是基于可扩展标记语言
(XML),用于描述二维矢量图形的一种图形格式。SVG由W3C制定,是一个开放标准。SVG严格遵从XML语
法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图

这里以苹果中文网站引用字体的方式为例:

@font-face {
    font-family:'HanHei SC';
    font-style:normal;
    font-weight:300;
    src:local('☺︎'), url("/wss/fonts/HanHei-SC/v2/HanHei-SC-thin.woff") format("woff"), url("/wss/fonts/HanHei-SC/v2/HanHei-SC-thin.ttf") format("truetype");
    /* Copyright © 2015 Apple Inc. All rights reserved. */
}

@font-face {
    font-family:'HanHei SC 300';
    src:url("/wss/fonts/HanHei-SC/v2/HanHei-SC-thin.eot");
    /* Copyright © 2015 Apple Inc. All rights reserved. */
}

@font-face {
    font-family:'HanHei SC';
    font-style:normal;
    font-weight:600;
    src:local('☺︎'), url("/wss/fonts/HanHei-SC/v2/HanHei-SC-semibold.woff") format("woff"), url("/wss/fonts/HanHei-SC/v2/HanHei-SC-semibold.ttf") format("truetype");
    /* Copyright © 2015 Apple Inc. All rights reserved. */
}

@font-face {
    font-family:'HanHei SC 600';
    src:url("/wss/fonts/HanHei-SC/v2/HanHei-SC-semibold.eot");
    /* Copyright © 2015 Apple Inc. All rights reserved. */
}

@font-face {
    font-family:'HanHei SC';
    font-style:normal;
    font-weight:400;
    src:url("/wss/fonts/HanHei-SC/v2/HanHei-SC-text.eot");
    src:local('☺︎'), url("/wss/fonts/HanHei-SC/v2/HanHei-SC-text.woff") format("woff"), url("/wss/fonts/HanHei-SC/v2/HanHei-SC-text.ttf") format("truetype");
    /* Copyright © 2015 Apple Inc. All rights reserved. */
}

font-weight

很多人都有过这样的疑问,为什么文档上说我可以设置为100-900,但是有时设置上去却没有起效果呢?还有就是为什么设置为bolder或者lighter却没有比bold更粗,比light更细呢?
事实上这个跟字体本身有很大的关系。老实说,如果不支持那也没办法,可以试试下载新字体。

下载新字体

一般你可以翻个墙,直接去Google Font上下载,国内的话,搜搜总有的。

中文字体文件过大

一般情况下,很少需要去下载中文字体,中文字体文件这家伙由于包含了众多的中文字符,很难小下去,见过一些比较有情怀的公司(卖东西的)才会用字体,如苹果(2.xMB,thin+normal),魅族(430+kb),还有锤子(250+kb),小米(20+kb),按理说,其实也不该是这个数字,很显然他们有做压缩处理的。压缩方式:

  1. 预览生成字体,先知道网页会有哪些个字然后就根据这些个字生成字体文件(有对应软件工具)
  2. 去掉不常用字(还是很大好么,听说可以从7000+->2000+)
  3. 尽量用系统内置吧,网站运营重要

版权声明: 署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0
Copyright ©2013-2017 | 粤ICP备14081691号 | yipeng手工打造 | 联系方式