當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

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

發(fā)布時(shí)間：2023/12/20 编程问答 27 豆豆

生活随笔收集整理的這篇文章主要介紹了网页中使用的特殊字体(webdings, wingdings 2)续小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前言

其實(shí)在上一篇

網(wǎng)頁中使用的特殊字體(webdings, wingdings 2)

已經(jīng)完成了，但是發(fā)布之后， csdn 竟然保存出現(xiàn)了異常。估計(jì)是使用了一些 unicode 的緣故。

這應(yīng)該也算csdn 的bug 了。

?wingdings 2

不能貼表了，直接參考

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

開發(fā)

實(shí)際開發(fā)中，使用的方式很簡單，直接設(shè)置font- family 就可以了。

<!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是非正統(tǒng)字型，而且需要額外讀取，沒有Webdings字型的平臺就會產(chǎn)生訊息不能傳遞的問題。在維基找到了所有 unicode 列表
http://zh.wikibooks.org/w/index.php?title=Unicode%2F2000-2FFF&variant=zh-hant

使用unicode 替換就可以了。

對wingdings 2字體來說，上面的} 顯示的是一個(gè)圓圈里面一個(gè) 數(shù)字9 ,以上效果在firefox 中卻不能顯示，

這個(gè)圖形對象的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

?操作系統(tǒng)的差別

基本上windows 系統(tǒng)都有安裝這些字體，所以可以通過font-faimily 直接指定，

可以到 C:\WINDOWS\Fonts 去找到這些字體的文件? 后綴名是 .ttf 的。

但是在Linux系統(tǒng)上，并沒有這些字體。

linux 安裝字體位置是：? /usr/share/fonts .

所幸的是 css3 有一個(gè)導(dǎo)入字體文件的方式 @font-face

從windows 中把對應(yīng)字體文件(.ttf) copy 處理，放在web 項(xiàng)目的相應(yīng)目錄下，如下使用

<!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. 導(dǎo)入字體文件

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以下的瀏覽器嗎，不用擔(dān)心，在舊的瀏覽器使用@ font-face時(shí)，不同的瀏覽器支持特定的字體文件。
IE瀏覽器：EOT
Mozilla瀏覽器：OTF，TTF
Safari瀏覽器：OTF，TTF??，SVG
歌劇：OTF，TTF??，SVG
Chrome瀏覽器：TTF，SVG

Font Squirrel

Font Squirrel是一個(gè)很棒的網(wǎng)站，你應(yīng)該非常熟悉。Font Squirrel是一家集優(yōu)質(zhì)商業(yè)使用的免費(fèi)字體供您下載。最重要的是，他們有@ font-face的工具包部分和@ font-face的工具包生成器。Font Squirrel工具包，為您提供不同的字體類型，你需要支持的每一個(gè)瀏覽器。

@ font-face的工具包

Font Squirrel的套件部分是現(xiàn)成的工具包，其中包括多種字體格式，CSS和HTML代碼的集合。所有你必須??做的是選擇一個(gè)字體，下載工具包，并復(fù)制代碼。這是簡單，。最重要的是，他們有一個(gè)很大的選擇充滿了巨大的字體。

總結(jié)

以上是生活随笔為你收集整理的网页中使用的特殊字体(webdings, wingdings 2)续的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：基于Python的复杂环境中车道线自动检
下一篇： 3DMAX中旋转楼梯的做法