亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

用@font-face實(shí)現(xiàn)網(wǎng)頁特殊字符(制作自定義字體)

  發(fā)布時(shí)間:2013-04-01 11:24:51   作者:佚名   我要評論
用css來實(shí)現(xiàn)三角箭頭,雖然達(dá)到需要的效果了,但還是有一些問題,比如依舊需要靠position來定位箭頭的位置,目前也只能實(shí)現(xiàn)三角箭頭,若想用一些其他的字符,還是得用圖片,接下來與大家分享一個(gè)好的方法

  前幾天寫了篇文章,就是用css來實(shí)現(xiàn)三角箭頭,雖然達(dá)到需要的效果了,但還是有一些問題,比如依舊需要靠position來定位箭頭的位置。而且目前也只能實(shí)現(xiàn)三角箭頭,若想用一些其他的字符,還是得用圖片。于是最近一直在尋找更好的辦法,最終被我找到了……

  首先,我們?nèi)盤Fonts文件夾里找到WEBDINGS.TTF字體,復(fù)制到桌面。接下來,我們需要一個(gè)軟件,就是“fontforge”,它可以實(shí)現(xiàn)制作自定義字體的功能,我們后面就要用它來做一個(gè)適用于我們自己的字體庫。

  下載好后解壓,把WEBDINGS.TTF字體復(fù)制到里面,運(yùn)行fontforge.bat并選擇字體文件,然后出現(xiàn)這個(gè)界面:

  很多圖形字符吧,是不是發(fā)現(xiàn)很多字符以前都用到過,只不是那時(shí)是用圖片來實(shí)現(xiàn)的?

  接下來我們要做的就是選擇需要的字符,存到另一個(gè)字體文件里,因?yàn)閃EBDINGS.TTF這個(gè)文件里的大多數(shù)字符都是用不到的,所以直接用這個(gè)文件來當(dāng)我們的字符庫有點(diǎn)略大,所以我們只需選擇我們需要的就行,操作上我們先新建一個(gè)空白的字體文件,點(diǎn)File->New,然后選擇需要的字符,并復(fù)制到新建的字體文件中,如:

  然后保存,選擇Generate Fonts:

  然后設(shè)置保存為.ttf結(jié)尾的文件:

  這樣,我們的字體文件就做好了。但是,還沒有結(jié)束,因?yàn)镮E只認(rèn)識.eof,不認(rèn)識.ttf,所以我們還需要生成其他的字體文件,關(guān)于這個(gè)問題,我很早寫過篇文章,操作方法都有說明,就不具體介紹了,文章鏈接:《網(wǎng)頁中使用任意字體之實(shí)際操作》。

  最后,如果你覺得操作太麻煩,可以下載我整理的一個(gè)字符庫,主要是以箭頭為主,因?yàn)樘S昧恕?br />  下載地址

  總的來說,這個(gè)東西雖然會(huì)增加加載頁面文件的總大小,但是如果有自己的字符庫,操作性會(huì)更加多元化。因?yàn)槲覀兛梢钥刂谱址拇笮?、顏色,甚至還有陰影、翻轉(zhuǎn)等css3效果,而圖片如果要換個(gè)顏色,就必須修改,或者重新制作一張,可塑性不強(qiáng)。

  PS:我的EonerCMS里,窗口右上和右下的按鈕都已經(jīng)換成字符了,效果挺不錯(cuò)的

  PS2:感謝@小熊提供的思路,既然可以用過css3&濾鏡實(shí)現(xiàn)字符旋轉(zhuǎn),我們在制作字符庫的時(shí)候,4個(gè)方向的箭頭就可以只記錄一個(gè),通過代碼來讓其進(jìn)行旋轉(zhuǎn),來減少字符庫文件的大小。

相關(guān)文章

  • 使用CSS3的font-face字體嵌入樣式的方法講解

    CSS3中的font-face可以將我們上傳的自定義的字體顯示出來,有時(shí)比如我們要顯示英文音標(biāo)的字體時(shí)便需要用到,本文就整理了一下使用CSS3的font-face字體嵌入樣式的方法講解,需
    2016-05-13
  • CSS3 @font-face屬性使用指南

    本文介紹了css3的屬性@font-face的使用方法,以及在@fant-face中使用字體化圖標(biāo),有相同需求的小伙伴,自己參考下。
    2014-12-12
  • css3 自定義字體font-face使用介紹

    這篇文章主要介紹了css3 自定義字體font-face使用,需要的朋友可以參考下
    2014-05-14
  • 使用font-face改變字體即加載外部字體

    喜歡網(wǎng)頁布局的朋友對font-face并不陌生吧,使其可以改變網(wǎng)頁字體,下面有個(gè)不錯(cuò)的示例,大家可以參考下
    2014-02-10
  • CSS3用@font-face實(shí)現(xiàn)自定義英文字體

    傳說中的CSS3基本上什么都可以,那么CSS3中可不可以自定義英文字體呢?答案是非常可以。用@font-face即可實(shí)現(xiàn)自定義英文字體,下面有個(gè)不錯(cuò)的示例,感興趣的朋友可以了解下
    2013-09-23
  • @Font-face的基本用法及讓全部瀏覽器都兼容的方法

    @font-face 是一個(gè)css2的一個(gè)語法,它允許你在網(wǎng)頁上顯示一個(gè)自定義的字體,下面為大家介紹下@font-face的基本用法,以及在所有瀏覽器都能使用的方法,感興趣的朋友可以參
    2013-07-04
  • 什么是@font-face及font-face如何在css中使用

    @ font-face的是一個(gè)CSS規(guī)則,允許你輸入自己的字體出現(xiàn)在網(wǎng)站上,即使在特定的字體在訪問者的計(jì)算機(jī)上沒有安裝,它也可以辦得到,在使用字體方面它真的很重要,您可以使用任
    2013-02-26
  • CSS @font-face屬性實(shí)現(xiàn)在網(wǎng)頁中嵌入任意字體

    下面要講的是如何只通過CSS的@font-face屬性來實(shí)現(xiàn)在網(wǎng)頁中嵌入任意字體。
    2009-12-11
  • 詳解如何在css中引入自定義字體(font-face)

    本篇文章主要介紹了詳解如何在css中引入自定義字體(font-face),能將自定義的字體添加到網(wǎng)頁中,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看
    2018-05-17

最新評論