源于生活

标题: css使用客户端没有安装的字体语法解决方案 [打印本页]

作者: kevin-ying 时间: 2015-8-31 12:05
标题: css使用客户端没有安装的字体语法解决方案
在服务器端安装字体是没有办法解决的，因为浏览操作是在客户端，客户端要装该字体才可以。可以用动态字体方案，微软有工具可以制作，到其网站上查一下。但是对于中文字体，下载量太大了，不适合。英文字体的话，还是不错的。

@font-face版本：CSS2　兼容性：IE4+
语法：@font-face { font-family : name ; src : url ( url ) ; sRules }

取值：
name :　字体名称。任何可能的 font-family 属性的值
url ( url ) :　使用绝对或相对 url 地址指定OpenType字体文件
sRules :　样式表定义

说明：
设置嵌入HTML文档的字体。此规则无默认值。
此规则使你能够在网页上使用客户端本地系统上可能没有的字体。 url 地址必须指向 OpenType 字体文件(.eot或.ote)。此文件包含可以转换为 TrueType 字体的压缩字体数据，可以用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。此文件可以使用 Microsoft WEFT 工具制作。

示例：

@font-face { font-family:comic;src:url(http://valid_url/some_font_file.eot); }
@font-face { font-family: dreamy; font-weight: bold; src: url(http://www.example2.com/font.eot); }

复制代码

作者: kevin-ying 时间: 2015-8-31 12:07
如何转换生成.ttf.eot.woff.svg@font-face文件@font-face功能
网页上展示最多的内容是什么？文字！纵然使用图片再多的网页，也不会丢掉文字符号。

@font-face语句是css中的一个功能模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。

@font-face文件
而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。

TrueType

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

EOT– Embedded Open Type (.eot)

EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

OpenType(.otf)

OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。

WOFF–WebOpen Font Format (.woff)

WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

SVG(Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

@font-face文件转换生成
.eot、.woff、.svg每种格式的文件都可以用专门的工具转换得到，同时也有专门的用于生成@font-face文件的网站，可以将字体文件上传到网站上，转换后下载，然后就可以嵌入到网页上使用了。

这里推荐几个@font-face文件转换网站：

freefontconverter

font2web

中文@font-face
上面的这些@font-face转换网站都不支持中文字体的转换，中文字体文件相对于英文显得过于庞大，很长一段时间都被认为是不适合嵌入网页的。

直到几年前，这个问题终于被一个日本网站解决了，他用的技术就是截取法，在前端置入一个js脚本，脚本自动根据网页内容适时生成一个小字库（只包含当前网页内容的小字库）然后自动转换成.ttf、.eot、.woff、.svg等格式嵌入网页中，从页实现@font-face效果。体验和英文@font-face差不多，效果非常漂亮。但日文@font-face网站对于中文网页还无法支持。

如果是你想在你的网页上使用中文简体@font-face服务，也不是不可能，推荐一个中文@font-face网站——“有字库”。

使用时，只需要引用一段js脚本代码或者一段css代码，网站就会自动帮你截取网页需要的小字库并生成.ttf、.eot、.woff、.svg等格式文件，你可以将各文件下载下来，也可以托管在这个网站上，非常方便。去试试吧

作者: kevin-ying 时间: 2015-8-31 12:52

　　有不少初学做网页的朋友，会犯这样一个错误――在网页中使用了很多种特殊的精美的字体，当网友们浏览时，却因没有安装相应的字库，只能看到默认的宋体字，效果惨不忍睹。利用图片的方式来显示这些特殊字体，会使网页的体积增大很多，而且还不能方便地复制网页的内容。好在微软公司发布了一款名为Microsoft Web Embedding Font Tool （WEFT）的软件，可以很方便地解决在网页中嵌入特殊字体的这一难题。

　　Microsoft Web Embedding Font Tool（网页字体嵌入工具，下载地址：http://www.microsoft.com/typography/web/embedding/weft3/weft01.htm）能够将网页中的字体制作成一个EOT格式的压缩字库，这个字库中仅包含了你在网页中使用到的那些文字，因此体积非常小巧。当网友们访问这个页面的时候，浏览器会自动下载该字库，将其中的字体在网页上完美地显示出来。下面就让我把WEFT的应用介绍给大家：

　　1．安装并运行WEFT，点击工具栏上的"Wizard"进入向导界面，输入你的姓名和电子信箱地址；

　　2．（如图1），在"Add Web Pages"窗口中，选中要嵌入字体的网页，点"下一步"继续；

[attach]1129[/attach]

图1

　　3．接下来会弹出一个对话框，大意是说，制作出的网页需要Unicode 和Uniscribe 的支持，所以在Windows 98 和MacOS 上可能会出现显示不正常的情况，询问是否继续。真啰嗦，当然要继续了！

　　4．WEFT会分析你的网页中使用了那些字体，并将其显示在列表中（如图2），如果你不想将某种字体嵌入网页的话，选中该字体，点击"Don't embed"即可；

[attach]1130[/attach]

图2

　　5．然后在"Create Font Objects"窗口（如图3）， "Enter the location where the font objects will be created"一栏中指定生成的字体文件的路径，并且勾选上"Show CSS @ font-family Declarations",其它的使用默认值就行了；

[attach]1131[/attach]

图3

　　6．生成EOT字体文件和CSS样式表，（如图4）所示，复制两横线间的代码，粘贴到网页源代码的部分。我们很容易理解代码中"src:

[attach]1132[/attach]

图4

　　url(*.eot);"指向的就是EOT字库的路径，如果你的网页和EOT字库不在同一目录下，请根据情况修改url的指向；

　　7．后面的步骤我们可以不必理会，直接点"下一步"，最后"完成"就行了。

　　现在把你的网页和EOT字库上传到网上，找个朋友帮你测试一下，看看效果吧！怎么样？很有成就感吧！

作者: kevin-ying 时间: 2015-9-3 09:10
各种终端字体的支持状态

一、各移动设备系统支持情况

字体                         安卓4.0+          IOS6.0+          WP8
sans-serif（无衬线）  支持                支持                支持
serif（衬线）             支持                支持                支持
monospace（等宽）  支持                支持                支持
fantasy（梦幻）       不支持             支持                支持
cuisive（草体）       不支持             不支持             不支持

二、常用CSS中不同平台的字体设置

移动端项目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

复制代码

pc端(含Mac)项目：

font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;

复制代码

移动和pc端项目：

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

复制代码

作者: kevin-ying 时间: 2015-9-3 09:13
网页设计中最常用的字体

英文字体
Sans-serif

Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常
Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。
Verdana，是一套无衬线字体，由于它在小字上仍有结构清晰端整、阅读辨识容易等高品质的表现，因而在1996年推出后即迅速成为许多领域所爱用的标准字型之一。

Serif

Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。
有些偏艺术类的网站的大字会使用lobster。更艺术的网站就搜索free font，或者font freebie吧，出现的名字格式为“X种免费网页设计字体”的博客文章，都进去看一眼，挑一个就好。

Trebuchet、Georgia、Times New Roman、Arial、Lucida等字体在26px或更大像素时效果是比较好的，非常适合作为正文的标题。

中文字体

中易宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。
Droid Sans和衍生的WenQuanYi Microhei：Andriod中的中文，也是Linux绝大多数发行版本的默认中文，，当然也有用WenQuanyi Zenhei的，不过比较少了。
如果是中文字体，设计的时候最好使用微软雅黑。微软雅黑配上h3比较好看。
因为前端工程师在实现网站的时候，能够使用的中文字体局限于一下几种：
宋体、微软雅黑、Lucida Grande（苹果官方网站使用的中文字体）。

为什么？
电脑系统有自带的字体，PS 有自带的字体，浏览器也有自带的字体。然而浏览器自带的字体很有限。这又是为什么？英文字体，26个英文字母+数字+符号就可以了。然而中文汉字的数量是非常庞大的。导致文件的体积也很大。

另外前端可以使用 @font-face 调用一些其他的字体库，弊端是，用户在访问的时候要去下载这个文件，所以会影响整个网站的效率。

作者: kevin-ying 时间: 2015-9-3 09:17
经典英文字体推荐：
Centaur
具有史诗般正统风格，特别适合用于表现年代悠久。具体排版时注意合字和老式数字的使用。
Garamond
复古传统，没有强烈个性，十分易于阅读，因为太流行所以很多大的公司都做过Garamond复刻，苹果电脑里有系统字Garamond以及Adobe所制作的Adobe Garamond Pro。如果是希望web上使用，可以考虑EB Garamond。
Caslon
美国独立宣言用字，是活字时代的大热字体。很多公司也做过Caslon复刻，现在的使用也非常广泛。
Baskerville
过渡期罗马体(旧体到现代体)的代表性字体，非常经典，给人古典、高贵的感觉。
Didot
现代衬线体，发丝衬线。特点是强烈的笔画粗细对比和水平衬线，时尚，现代，优美。
Franklin Gothic
这款字体是很早出现的无衬线体，所以带有古风，笔画粗狂有力，具有男性化感觉，适合表现强有力。Web字体可以考虑Oswald。
Futura
Futura是拉丁语未来的意思，现代且具有几何特征，感觉是现在的主流大热字体，尤其是要突出时尚，设计感的时候可以使用。制作过程中受到包豪斯运动的影响。是LV的商标用字，也是现在很多杂志的首选字体。
Gill Sans
英国风格的代表字体，具有古典风格的骨架，但是又有很强的科技感和未来感，字体外形偏几何，但是是humanist字体，相对futura会柔和一些。
Opima
有古典气息，笔画两端比较粗中间比较细，气质优雅。时代周刊的字体更换，雅虎2013年使用Optima作为全新标识的设计基准都证明了这款字体的热度。
Univers
Grotesque字体，比Helvetica更加简练。字体家族非常全面，所以搭配使用很方便。
Myriad
Humanist字体，很早就已经流行，随着苹果的广泛使用更加引人注目，笔画柔和简洁。
Avenir
字形简洁，现代，虽然也有几何特征，但是不失人情味。Avenir是法语未来的意思，对同样未来含义的Futura是一种挑战，放大x-height，降部拉长，使得文字的易读性明显提高。字体家族也很完整。
再提两句Helvetica，内部分享的时候很多设计师问到为什么没有作为一个推荐字体在这里列出，一方面是因为Helvetica已经作为现代字体中的经典字体被应用得非常广泛了，并不缺乏关注。另一方面Helvetica是Neo-grotesque字体，结构严谨，没有情绪导向，提供着强烈的安全感，好像怎么用都不会错，这是个优势也是个劣势，当我们的设计有比较明确的受众群体或者设计对象有比较明确的气质的时候能够寻找到有同样气质的字体会是更优的选择。

作者: kevin-ying 时间: 2015-9-3 09:21
网页设计常用的好看的字体
如何构建一个合理的font-family，并推荐几个使用的字体组合给大家。
仍旧按照CSS标准的解释方式来写 font-family，但是在 font-size 上做些手脚，只用 12px, 14px, 16px 等稳扎稳打的字体大小。这样做最大的好处是能优先用最合适的字体显示英文字符。至于中文字符，XP的宋体也好，Vista的雅黑也好，OS的新宋体也好，在上面几个字体大小下显示的都不算难看。何况中文字体的选择范围本来就比较小，无外乎也就是那几个系统默认字体，因此自然也凑合。个人比较倾向使用这种方案。
Tahoma是我本人比较喜欢的一种非衬线字体。首先几乎所有的系统都默认安装了这个字体，所以不会存在兼容性问题，其次，这个字体也比较均衡，显示段落也不错。

Verdana 16px Verdana 14px Verdana 12px

说老实话，Verdana太宽了，不适合中英文混排。很多时候Verdana的一个字母都要比同样size的中文字符宽了。国外设计师喜欢用Verdana, 很多时候是因为Verdana 11px以下的小字效果的确十分理想，但是晋内很多设计师想也不想就照搬过来，并用在12px 乃至14px的布局上，导致本来就局促的空间更显紧张，所以不推荐作为font-family 打头阵的字体。
如果要使用Verdana字体的话，就一定要考虑它和一般系统default的sans-serif字体之间的大小差距。不论和Helvetica 或者Arial 比起来，Verdana都大得多了。不过好在几乎所有的系统也都会默认安装这个字体……

Trebuchet MS 16px Trebuchet MS 14px Trebuchet MS 12px

Trebuchet MS 是个很多人都会忽视的字体。其实我个人也比较欣赏这个字体的。与其使用Verdana, 还不如用这个线条更圆润的的字体来替代。对各种操作系统也有很好的支持。
缺点是和Verdana一样，因为过宽，而不适合用在中英文混排。也要注意和default sans-serif font 宽度差距的问题。
因为考虑到有些Linux 系统可能不会安装这个字体，所以如果要用在一个font-family的开头话，可以使用Verdana 做后续字体。

Arial 16px Arial 14px Arial 12px

Windows 操作系统的默认sans-serif 字体。没啥好说的，永远都不会用到的默认字体。
Helvetica 16px Helvetica 14px Helvetica 12px
为啥同样是默认字体，Helvetica 就这么典雅呢？哪怕就是用在font-family的开头也是能独挡一面的啦。
另外，这里有个 Helvetica 和 Arial 打架的flash游戏~ 像超级玛利一样踩 Arial 字符就可以了。顺便没有 Helvetica 字体的人可以看一下两个字体的具体区别~ 茶~

Georgia 16px Georgia 14px Georgia 12px

我最喜欢用的 serif 字体。不仅很适合做正文，也适合做标题。尤其是意大利体的 Georgia Italic 更是魅力难挡。缺点仍旧是不适宜和汉字混排，因为Georgia的衬线哪怕对于宋体来说也太重了，所以看上去硬邦邦的……

Times New Roman 16px Times New Roman 14px Times New Roman 12px

Windows 的默认serif 字体。没啥好说的，西文字体的元老了。很多字体，比如大家都熟悉的Courier New都是从Times New Roman派生出来的。
不过现在印刷业都很少用这个字体了，更多的是在用它的后代——Times Europa 和 Times Europa Office。
在具体的网页字体应用上，要注意同样字号的Times New Roman比普通字体小的多，所以一定要考虑进字体大小的变化

Courier New 16px Courier New 14px Courier New 12px

常用的等宽字体之一。其实等宽字体的选择比较小啦，所以基本上要兼容所有系统，也就只能选这个字体了。
不过还好，等宽字体通常都是在写代码的时候有用，所以只要等宽就没什么大问题。类似于 Lucida Sans Typewriter, Lucida Console, Monaco 之类的字体也都很好用。
- 综上所述，总结几套实用而简单的font-family

font-family: Tahoma, Helvetica, Arial, sans-serif;
Tahoma 系的中性字体。推荐使用在13px以上的环境。
font-family: Trebuchet MS, Verdana, Helvetica, Arial, sans-serif;
Verdana 系的宽扁字体。推荐在11px以下环境使用。
font-family: Geogia, Times New Roman, Times, serif;

衬线字体的不二之选。

font-family: Lucida Console, Monaco, Courier New, mono, monospace;

一系列等宽字体。写代码很好用。另外，如果觉得Lucida Console太宽的话，可以换成比较窄的Lucida Sans Typewriter。话说老赵blog上的代码块使用的就是Lucida Sans Typewriter 哟~

至于“宋体”这样的字体名称，因为中间没有空白字符，因此完全没有必要加引号。但是考虑到并非左右的操作系统都有汉字支持，并且并非所有的程序员都会注意css文件的正确编码问题，所有保险起见，一般会加上引号。当然，解决这种问题的最好方法是使用别名。比如宋体，其实应该写成SimSon，这样哪怕浏览者的系统不支持中文，并且这个css文件被错误的编码成了GB2132也没问题，浏览器还是知道这是宋体，并且做出正确的字体搜索。可惜，不是所有浏览器都支持就是了……

欢迎光临源于生活 (http://bbs.vingoo.info/)