在网页中使用嵌入字体

出处: http://dknt.blueidea.com/archives/2006/2833.shtml

网页的呈现根据个体计算机的不同而不同，最显著的一点就在于对字体表达上面。不同的计算机采用不同的操作系统，浏览器，并且安装了不同的字体。网页设计者无法预知浏览者的计算体安装了什么字体，也就是说不可能了解设计中需要字体在浏览者的计算机中是否存在。若不存在，则该字体涉及的内容不能在浏览者的计算机上正确呈现。

解决字体呈现的问题常见的有以下几种办法：

使用图片,直接在一个可能应用到某个特殊字体的地方，使用含有最终效果的图片来代替。该方法的优点是实现简单，效果稳定。缺点是对动态内容的适应性极差，不易更改，不能逆转。这是用得最多的一种办法，因为特殊字体大多用在一些装饰性的标题字上面，这些装饰性文字大多都是静止的。
使用Flash,也就是利用Flash内建的嵌入字体机制来辅助实现。该方法大多和复杂的应用结合，单独表达一个字体略显大材小用了。这种方法不如刚才提到的方法简单，但是有很强的对变化内容的适应性。
使用网页嵌入字体(Web Embed Font),这是本文将要介绍的方法。这种方法最为自然。实现起来，仅在第一次时略显麻烦，但是对于一个不熟悉FLASH的网页设计师来说，也还是比第二种简单许多。第一次使用之后，再次应用的代价甚至比第一种方法还小。

必须要提醒的是，嵌入字体的方法只能在 Microsoft Internet Explorer 浏览器上才可以实现。对于其他浏览器的解决方案，请另行参看其它文章。

使用嵌入字体，必须借助一个软件 —— "Microsoft WEFT",这是一个将其他字体转换为OpenType类型字体的工具。你可以从 http://www.microsoft.com/typography/WEFT.mspx 下载到这个软件。

在网页中嵌入的字体只能是 OpenType 类型，其他类型的字体只有转换成 OpenType 类型的字体才能在网页中进行嵌入。因此，第一次使用嵌入式字体比较麻烦的地方就是要将其转换成一个 OpenType 类型的字体。

OpenType类型的字体是带有版权的，它规定了在什么样的网页中可以使用该字体（由URL进行限制），规定之外的网页即使使用该字体，也没有任何效果。这种版权体现了网页设计者的权力。此外，该类型的字体也是不可再次编辑的。这样两方面都限制了浏览者将该字体下载下来为自己所用。可见，OpenType字体方案是一个很尊重设计者版权的方案。

OpenType字体不要求完备的字符集，它可以只包含某个字符集中的一部分文字的字体，这样可以根据应用需要最大可能的减少字体文件大小。

现在我们来试着建立一个OpenType字体。

启动WEFT后，你将看到欢迎界面。紧接着会出现一个向导。向导的大概意思是分析一个页面，找出所应用的特殊字体，然后形成一个OpenType字体文件。然而在很多时候，我们并没有页面可以进行分析，或者页面上的文字是动态生成的（这本来就是我们使用嵌入字体的原因），向导不能捕获这些动态内容，因此向导在这时是没有用的。我们可以取消这个向导，以手动方式生成所需的 OpenType 文件。

首先，打开菜单 "Tools" - "Expert Create Font...",在弹出的对话框中使用 Add 按钮从字体库中选择欲嵌入的字体。这时大致会呈现下图所示的情况。

字体的Info字段可能有多种形式，标记为 'no embeding' font 的字体是不可以被嵌入的字体（此时的字体前的图标是一个小红叉），说明你拿到了一个有版权保护的字体。遇到这种情况，请向你的字体提供者索要一个可以被嵌入的字体版本。如果索要有困难，在不得已的情况下，请参考这篇文章：http://www.derwok.de/downloads/ttfpatch/.请注意，如果你这样做了，在大多数国家里，你的行为将是违法犯罪行为。

若你对字体文件本身进行了修改，则需要重建或更新字体库，方法是执行菜单命令"Tools - Update Font DB..." 或者 "Tools - RecreateFont DB..."

点选一个字体后，还可以点击 Subset 按钮以决定要嵌入字符集中的哪些字符。黑色的是选中将要被嵌入的，灰色的不会被嵌入。如下图所示：

除此之外，必须在Bind文本框中输入要绑定的URL,多个URL之间用;隔开。URL必须包含且仅包含协议和网络地址。注意，只有这些绑定的URL才能应用该OpenType字体。

在Location中，协议选择 file, 点"..."按钮，选择一个位置存放将要生成OpenType文件的地方。

最后，点击"Create",则可以生成相应的OpenType文件。

如果你勾选过 Create CSS with Relative URLs ,则会弹出一个 CSS 示范代码。

这段代码要放到网页中相应的位置，如何组织可自行决定。

其中 font-family: Zabdiel; 中的 Zabdiel 是字体名字，你可以任意设定。

src: url(THEURL); 不要忘了上传OpenType文件之后，将 THEURL 作相应改动。

然后你便可以在网页中使用，<span style="font-family:'Zabdiel'">Text</span> 的形式使用这个字体了。当然，这个网页必须在之前绑定域下才可以有效。

如果你对那个向导耿耿于怀，请看：www.pconline.com.cn/pcedu/sj/wz/other/10205/60515.html

要获得关于嵌入式字体最权威的信息，请看：About Font Embedding (From MSDN)

--------------------

@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.example.com/font.eot);
}

--------------------

解决字体老大难—在对方浏览器显示新的字体
http://www.chineseliterature.com.cn/diannao/books/software/design/web/other/034.htm

-----------

偶在该站下载了三百多个字体！
http://www.dafont.com/top.php

英文字体栏目共有资源1006张
http://www.deskcity.com/scatalog.asp?scatalog=87

2500种英文字体下载（国外站）
http://www.goodfont.net/showdown.asp?soft_id=377

中文字体字体栏目共有资源200张
http://www.deskcity.com/scatalog.asp?scatalog=88

字我陶醉 ─ 超世紀書法字型（20種）
http://coolfont.ayinfo.ha.cn/font/font_csj20.rar" target="_new">http://coolfont.ayinfo.ha.cn/font/font_csj20.rar

文鼎酷字集共33種字型(130M ) http://coolfont.ayinfo.ha.cn/download.asp?downid=1&id=338" target="_new">http://coolfont.ayinfo.ha.cn/download.asp?downid=1&id=338
文鼎習字體、香腸體、瀟灑體、花瓣體、霹靂體、妞妞體、荊棘體、竹子體、中特廣告體、細鋼筆行楷、中鋼筆行楷、粗鋼筆行楷、誰的字體、鬍子體、石頭體、行楷碑體、賤狗體、彈簧體、齒輪體、淹水體、火柴體、水管體、POP-4、雕刻體、圓立體、賤狗體繁、荊棘體繁、齒輪體繁、雕刻體繁。

汉仪字体30款
http://www.6266.net/k666/fontv/k666.com_88gg.com.rar

金梅毛行書
http://coolfont.ayinfo.ha.cn/font/TT1.zip" target="_new">http://coolfont.ayinfo.ha.cn/font/TT1.zip

方正仿宋繁體
http://coolfont.ayinfo.ha.cn/font/FZFSFW.zip" target="_new">http://coolfont.ayinfo.ha.cn/font/FZFSFW.zip

方正黑體繁體
http://coolfont.ayinfo.ha.cn/font/FZHTFW.zip" target="_new">http://coolfont.ayinfo.ha.cn/font/FZHTFW.zip

金梅毛楷體
http://coolfont.ayinfo.ha.cn/font/TT9.ZIP" target="_new">http://coolfont.ayinfo.ha.cn/font/TT9.ZIP

金梅毛隸書
http://coolfont.ayinfo.ha.cn/font/tt2.zip" target="_new">http://coolfont.ayinfo.ha.cn/font/tt2.zip

漢儀行楷繁
http://coolfont.ayinfo.ha.cn/font/f056.rar" target="_new">http://coolfont.ayinfo.ha.cn/font/f056.rar

方正魏碑繁體
http://coolfont.ayinfo.ha.cn/font/Fzwbfw.zip" target="_new">http://coolfont.ayinfo.ha.cn/font/Fzwbfw.zip

方正彩雲繁體
http://coolfont.ayinfo.ha.cn/font/FZCYFW.zip" target="_new">http://coolfont.ayinfo.ha.cn/font/FZCYFW.zip

方正姚體繁體
http://coolfont.ayinfo.ha.cn/font/FZYTFW.zip" target="_new">http://coolfont.ayinfo.ha.cn/font/FZYTFW.zip

方正大標宋繁體
http://coolfont.ayinfo.ha.cn/font/FZDBSFW.zip" target="_new">http://coolfont.ayinfo.ha.cn/font/FZDBSFW.zip

方正粗黑繁體
http://coolfont.ayinfo.ha.cn/font/FZH4FW.zip" target="_new">http://coolfont.ayinfo.ha.cn/font/FZH4FW.zip

14款迷你書法字庫 http://coolfont.ayinfo.ha.cn/font/sfzk.rar" target="_new">http://coolfont.ayinfo.ha.cn/font/sfzk.rar
壓縮到一塊共11.1M，之所以這麼小，因為各個字體去掉了一些不常用的字體和符號，所以字體變小，內有中國龍創藝字庫、少女體、簡趣味、繁智草、繁智楷、趙楷、王行、唐隸、歐行、陸行、柳楷、衡方碑、褚楷、曹隸共14款

華康唐風隸體
http://www.stmc.edu.hk/~991101/word2.zip

華康勘亭流體
http://www.stmc.edu.hk/~991101/word3.zip

華康雅宋體
http://www.stmc.edu.hk/~991101/word4.zip

華康瘦金體
http://www.stmc.edu.hk/~991101/word5.zip

華康魏碑體
http://www.stmc.edu.hk/~991101/word6.zip

華康古印體
http://www.stmc.edu.hk/~991101/word7.zip

下載以下字體 http://www.prettyfairies.net/
華康彩帶體華康娃娃體華康童童體華康布丁體華康墨字體華康流葉體華康海報體華康少女

四種新中文字體
粗活意繁體
http://coolfont.ayinfo.ha.cn/download.asp?id=414&downid=1" target="_new">http://coolfont.ayinfo.ha.cn/download.asp?id=414&downid=1

粗活意簡體
http://coolfont.ayinfo.ha.cn/download.asp?id=414&downid=2" target="_new">http://coolfont.ayinfo.ha.cn/download.asp?id=414&downid=2

流行體繁體
http://coolfont.ayinfo.ha.cn/download.asp?id=414&downid=3" target="_new">http://coolfont.ayinfo.ha.cn/download.asp?id=414&downid=3

流行體簡體
http://coolfont.ayinfo.ha.cn/download.asp?id=414&downid=4" target="_new">http://coolfont.ayinfo.ha.cn/download.asp?id=414&downid=4

十一個中文字型下載
http://www.ctc.edu.tw/m/font-ch/

創意繁隸書體
http://download.hzinfo.com/webfont/LISHUSF.zip

創意繁琥珀體
http://download.hzinfo.com/webfont/HUPOSF.zip

漢鼎繁顏體
http://download.hzinfo.com/webfont/HDZB_24.zip

漢鼎繁舒體
http://download.hzinfo.com/webfont/HDZB_10.zip

漢儀篆書繁體
http://download.hzinfo.com/webfont/MJ1GFM.zip

櫻桃小丸子的字型
http://myweb.hinet.net/home5/i0922475880/KK.zip

超级字体庫，应有尽有
http://www.goodfont.net/shownews.asp?news_id=26

200多种字体（字体包）
http://www.goodfont.net/showdown.asp?soft_id=373

30多M的华康字体包
http://www.goodfont.net/showdown.asp?soft_id=374

可爱的美术字（繁体）
http://www.goodfont.net/showdown.asp?soft_id=370

一款漂亮的空心草体书法字
http://www.goodfont.net/showdown.asp?soft_id=369

金梅重黑浮体白字
http://www.goodfont.net/showdown.asp?soft_id=365

金梅古印浮体白字
http://www.goodfont.net/showdown.asp?soft_id=364

金梅超黑立体留影
http://www.goodfont.net/showdown.asp?soft_id=363

Luckymagic英文字符扩展包
http://www.goodfont.net/showdown.asp?soft_id=362

魏体字库、圆头体字库、创意设计前沿--字体设计、余秉楠－字体设计、字体设计
http://www.goodfont.net/showart.asp?art_id=81&cat_id=7

200多种字体选择下载
http://www.k666.com/down-k666/list.php

酷字千寻
http://coolfont.ayinfo.ha.cn/

在网页中使用嵌入字体相关推荐

网页中使用任意字体之实际操作
之前对"在网页中嵌入非系统自带字体"做过一点研究,虽然技术上能实现,但是对国内来说,没有太大的实际意义,因为一个中文体文件起码20M+,而且各个浏览器支持的字体文件还都不一样,也就 ...
html5 在线字体库,网络字体@font-face，如何处理网页中的特殊字体？
网络字体@font-face 如何处理网页中的特殊字体 HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使 ...
web网页中的特殊字体/字符
web网页中的特殊字体/字符 1.特殊字体: Webdings字体,详见:http://blog.csdn.net/oscar999/article/details/10414411 测试: < ...
网页中动态嵌入PDF文件/在线预览PDF内容
网页中动态嵌入PDF文件/在线预览PDF内容https://www.cnblogs.com/xgyy/p/6119459.html #网页中动态嵌入PDF文件/在线预览PDF内容# 摘要:在web开发 ...
在网页中使用他人字体的版权问题
近年来,随着互联网的普及,人们越来越依赖网页.在网页中,可以使用各种字体来呈现内容.然而,有时候使用的字体需要购买,而购买字体的费用可能会引起版权纠纷.那么,在网页中声明收费字体是否会侵权呢? 首先, ...
网页中导入特殊字体@font-face属性详解
@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...
网页中使用的字体介绍
字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积 ...
网页设计html加音频,HTML5网页中如何嵌入音频，视频？
<HTML5的视频播放控制技术> 介绍了本文主要介绍在HTML5 中如何嵌入音频,视频? 在HTML5 中如何嵌入音频? HTML5 支持 MP3.Wav 和 Ogg 格式的音频,代码示 ...
网页引入谷歌字体_在网页中使用Google字体
网页引入谷歌字体 Google Fonts is a service provided for free by Google that allows access to thousands of fo ...
html5字体在线代码,网络字体@font-face 如何处理网页中的特殊字体
HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使用比较特殊的字体,又不会下载太大的字体文件,来装饰我们网 ...

在网页中使用嵌入字体

在网页中使用嵌入字体相关推荐

最新文章

热门文章