如何在網(wǎng)站制作中使用特殊字體
  • 更新時間:2024-11-08 20:34:29
  • 網(wǎng)站建設(shè)
  • 發(fā)布時間:1年前
  • 364

對于網(wǎng)站制作公司的前端老手來說,為了保證展示效果,不得不長期使用“安全字體”。英文網(wǎng)址永遠是Verdana,中文網(wǎng)址永遠是Songti ——,因為這是每臺瀏覽網(wǎng)頁的電腦必備的。安裝的字體。

網(wǎng)站制作如何使用特殊字體

這是設(shè)計理念不斷完善的UI老師所不能容忍的。字體是頁面效果的基礎(chǔ)。就像給模特換衣服走秀,卻只能用一兩個模特(對中國用戶來說,幾乎只有一種宋體)?如何在網(wǎng)頁上應(yīng)用豐富的字體效果?特殊字體應(yīng)用方案目前方案無非三種:

1. 客戶打開網(wǎng)頁,提示客戶安裝字體。

2.將圖片嵌入網(wǎng)頁。

3、將字體嵌入網(wǎng)頁(通過上傳字體文件到指定目錄,讓CSS引用顯示)。

第一種方案顯然有缺點,使用腳本程序來識別客戶端是否包含字體,增加了程序的負載。并嚴重影響用戶體驗。最有效!

第二種方案生成圖片,網(wǎng)頁加載慢,不利于百度收錄,效果差!

第三種方案流量小,加載速度快,效果最好!

第三種解決方案是指網(wǎng)頁字體(web fonts,也稱為“網(wǎng)絡(luò)字體”或“網(wǎng)絡(luò)字體”),可以通過將字體文件上傳到指定目錄,然后在CSS中以指定格式引用來使用。字體效果躍入你的頁面,讓網(wǎng)頁文字不再受瀏覽客戶端的影響。網(wǎng)絡(luò)字體與瀏覽器支持

Web 字體是通過CSS 中的@font-face 語句實現(xiàn)的。一般認為網(wǎng)頁字體是CSS3中的一個模塊。其實早在CSS2的時候就已經(jīng)存在了,甚至老式的IE6甚至IE4都支持它們。其他瀏覽器包括手機瀏覽器也完美支持(如IE、360、搜狗、Firefox、chrome、safari、Opera等)。網(wǎng)絡(luò)字體使用方法

各種瀏覽器都支持@font-face 聲明,但嵌入的字體文件是分開的。要想所有瀏覽器都能正常顯示,就得準備各種嵌入格式的字體文件(.eot、woff、svg、ttf)。

字體可以上傳到FontSquirrel,所有需要的格式都會自動生成。然后將文件上傳到空間,然后按照@font-face聲明的規(guī)范進行引用。

中文網(wǎng)頁字體的使用方法

注意中文字體,因為中文字體不同于英文。一套中文字體一般是4-6M。如果整套嵌入,沒有多少瀏覽者會耐心等待字體加載完畢,加載前關(guān)閉頁面。

所以需要提前截取中文字體,根據(jù)文章內(nèi)容涉及的字詞,將截取的小字體嵌入使用即可。

沒錯,中文確實是太麻煩了,這也是為什么英文網(wǎng)頁上使用了那么多網(wǎng)頁字體,卻很少遇到中文的原因。第三方平臺簡易操作

準備各種格式的文件太麻煩了,尤其是中文,需要截取小字體。

沒有專業(yè)的工具很難實現(xiàn),但是不用擔(dān)心,借助第三方平臺,這一切都輕而易舉。

現(xiàn)在有一些很棒的平臺。如英文typekit、fontdeck、google font等,以及中文“youziku.com”等,都可以大大方便網(wǎng)頁字體的使用。有字庫主要針對中文網(wǎng)絡(luò)字體引用,使用方法主要有兩種:

1.javascript方法

選擇字體后,網(wǎng)站將為您提供一個javascript 腳本。不需要提交文章,導(dǎo)入前后腳本即可。腳本會根據(jù)當前文章的內(nèi)容自動生成各種格式的字體文件,嵌入到當前頁面中。

2. CSS方式

選擇字體后,需要提交文章內(nèi)容。網(wǎng)站會將文章內(nèi)容截取到一個小型字體庫中,自動生成各種格式(.eot、woff、svg、ttf)的字體文件,并返回一個由css文件標簽引用的Link,你只需要將這個Link標簽引入到頁面的head標簽中,最后別忘了在引用網(wǎng)頁字體的標簽上設(shè)置class。

我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗,每一個項目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!

本文章出于推來客官網(wǎng),轉(zhuǎn)載請表明原文地址:https://www.tlkjt.com/web/13000.html
推薦文章

在線客服

掃碼聯(lián)系客服

3985758

回到頂部