网页中使用的特殊字体(webdings, wingdings 2)续
前言
其實在上一篇
網頁中使用的特殊字體(webdings, wingdings 2)
已經完成了, 但是發布之后, csdn 竟然保存出現了異常。 估計是使用了一些 unicode 的緣故。這應該也算csdn 的bug 了。
?wingdings 2
不能貼表了, 直接參考
http://www.alanwood.net/demos/wingdings-2.html
開發
實際開發中, 使用的方式很簡單,直接設置font- family 就可以了。
但是以上在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 ,使用以下方式 ❾ :
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 項目的相應目錄下, 如下使用
從以上可以看出,在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代碼的集合。所有你必須??做的是選擇一個字體,下載工具包,并復制代碼。這是簡單,。最重要的是,他們有一個很大的選擇充滿了巨大的字體。
總結
以上是生活随笔為你收集整理的网页中使用的特殊字体(webdings, wingdings 2)续的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 基于Python的复杂环境中车道线自动检
- 下一篇: 3DMAX中旋转楼梯的做法