网页中使用的特殊字体(webdings, wingdings 2)续

前言

其实在上一篇

网页中使用的特殊字体(webdings, wingdings 2)

已经完成了，但是发布之后， csdn 竟然保存出现了异常。估计是使用了一些 unicode 的缘故。

这应该也算csdn 的bug 了。

wingdings 2

不能贴表了，直接参考

http://www.alanwood.net/demos/wingdings-2.html

开发

实际开发中，使用的方式很简单，直接设置font- family 就可以了。

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
</script>
</HEAD><BODY>
<span style="color:red;font-family:webdings">n</span> <br>
<span style="color:red;font-family:Wingdings 2">}</span> <br></BODY>
</HTML>

但是以上在firefox 中不能显示。

mozilla.org建議使用 Unicode。

原因是 Webdings是非正統字型，而且需要額外讀取，沒有Webdings字型的平台就會產生訊息不能傳遞的問題。

在維基找到了所有 unicode 列表
http://zh.wikibooks.org/w/index.php?title=Unicode%2F2000-2FFF&variant=zh-hant

使用unicode 替换就可以了。

对wingdings 2字体来说，上面的} 显示的是一个圆圈里面一个数字9 ,以上效果在firefox 中却不能显示，

这个图形对象的unicode 是 10110 ,使用以下方式 ❾ ：

<span style="color:red;font-family:Wingdings 2">❾</span>

summary 一下：

1. webdings 在IE 和Chrome 下可以， firefox 需使用unicode

2. wingdings 2在IE下可以，在chrome 和firefox 需使用unicode

操作系统的差别

基本上windows 系统都有安装这些字体，所以可以通过font-faimily 直接指定，

可以到 C:\WINDOWS\Fonts 去找到这些字体的文件后缀名是 .ttf 的。

但是在Linux系统上，并没有这些字体。

linux 安装字体位置是： /usr/share/fonts .

所幸的是 css3 有一个导入字体文件的方式 @font-face

从windows 中把对应字体文件(.ttf) copy 处理，放在web 项目的相应目录下，如下使用

<!--Add by oscar999-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Author" CONTENT="oscar999">
<script>
</script>
<style>
@font-face{font-family:"Wingdings 2";src:url(WINGDNG2.TTF);
}
</style></HEAD><BODY>
<span style="color:red;font-family:Wingdings 2">❾</span>
</BODY>
</HTML>

从以上可以看出，在linux 上使用firefox 上需显示特殊的字符的话，

需要

1. 导入字体文件

2. 使用unicode 方式

font-face

@font-face {font-family: DeliciousRoman;src: url('…/Delicious-Roman.otf');font-stretch: condensed;font-style: oblique;font-weight: bold;
}

并非所有的浏览器都支持@ font-face的！

目前，@ font-face的支持

Firefox
Opera
Chrome
Safari
Internet Explorer 9

这是你会说他不支持IE9以下的浏览器吗，不用担心，在旧的浏览器使用@ font-face时，不同的浏览器支持特定的字体文件。

IE浏览器：EOT
Mozilla浏览器：OTF，TTF
Safari浏览器：OTF，TTF，SVG
歌剧：OTF，TTF，SVG
Chrome浏览器：TTF，SVG

Font Squirrel

Font Squirrel是一个很棒的网站，你应该非常熟悉。Font Squirrel是一家集优质商业使用的免费字体供您下载。最重要的是，他们有@ font-face的工具包部分和@ font-face的工具包生成器。Font Squirrel工具包，为您提供不同的字体类型，你需要支持的每一个浏览器。

@ font-face的工具包

Font Squirrel的套件部分是现成的工具包，其中包括多种字体格式，CSS和HTML代码的集合。所有你必须做的是选择一个字体，下载工具包，并复制代码。这是简单，。最重要的是，他们有一个很大的选择充满了巨大的字体。