您現在的位置是:電腦技術吧?>? 故障問題 ??>??網頁默認字體,如何修改網頁默認字體??>??正文詳情

網頁默認字體,如何修改網頁默認字體

母景彰2019-11-06 13:41:36 人圍觀
簡介網頁字體以字體為例,每個瀏覽器的默認字體類型、字體大小和字體行高都不同。例如,當IE8的中文版在WindowsXP中顯示網頁時,默認字體是宋體,而英文版則肯定不是這樣因網頁一般用

拿字體來說,各個瀏覽器默認的字體種類、字體大小和字體行高都不一樣,比如IE8的中文版在Windows XP下顯示網頁時默認字體是宋體,而英文版肯定不會如此。

所以我們需要統一設置默認的字體樣式,以便實現一致的顯示效果來保證設計的一致性和提高開發效率。

  樣式優先級  通常用戶看到的頁面的樣式會受到三層控制:  第一層是瀏覽器的默認樣式  第二層是網頁定義樣式  第三層是用戶自定義樣式  和CSS一樣,后面的優先級 高于前面的,也就是說網頁定義樣式可以覆蓋瀏覽器的默認樣式,而用戶自定義樣式優先級最高。

不過,當有 !important 時,網頁樣式可以覆蓋用戶自定義樣式。

用戶!important 網頁!important 用戶 網頁 瀏覽器默認。

  字體:arial  我們頁面的絕大部分內容字符都是中文,毫無疑問目前為止在網頁上最常用也是最通用的顯示中文的字體是宋體,但是宋體在顯示英文、數字和英文符號時過于糟糕,比如字符,所以我們一般期望通過CSS來實現用更好的字體樣式來顯示它們,然后用宋體來顯示中文和中文符號。

之所以選擇arial是因為:  Windows和Mac都預裝了這款字體,應該是使用最廣泛的網頁字體了。

它的潛在對手tahoma和helvetica就沒有這么幸運了。

  視覺設計的專業人士可能會認為在Windows中使用tahoma、在Mac中使用helvetica更好,比如淘寶的默認字體樣式是font: 12px/1 Tahoma, Helvetica, Arial, 5b8b4f53, sans-serif;  這是一個很不錯的選擇,但是你也會發現Google、YAHOO、Youtube、Bing甚至MSN的新版都使用arial作為第一默認字體。

所以從美觀和可讀性上來講arial應該是完全可以接受的。

  一般情況下設置font-family都會在最后設置通用字體族以保證其安全性,比如Google的設置為font-family:arial,sans-serif;,但是至少在非中文版的Win7下當編碼是GBK時,IE8會因sans-serif來渲染宋體,導致字體出現變形,這就是為什么淘寶需要在sans-serif前加上宋體而Google無需這樣做的原因。

  因為中文字體的選擇非常有限,所以目前所有的主流瀏覽器都設置使用宋體來顯示中文。

Baidu的首頁和搜索結果頁使用font-family:arial;可以從側面說明這樣做的安全性。

可能有人注意到Firefox中國版默認顯示的中文字體是微軟雅黑,這是因為謀智網絡擅自修改了用戶自定義樣式,不允許網頁的樣式覆蓋瀏覽器設置的樣式。

也是由于類似的情況,我們要彈性設計網頁非常重要。

  使用英文字體作為第一默認字體會導致的問題之一就是中英文以及符號混排時的對齊問題、通過設置行高和hasLayout能解決絕大部分情況,但是都不會很完美,如果把字體改成宋體能徹底的解決問題。

很明顯,這個問題只出現在IE上。

所以,如果你的網站很少使用英文、數字和英文符號,那么直接設置{font-family:5b8b4f53;}也是很合理的選擇。

  大小:12px  12px是宋體能顯示的極限,雖然微軟雅黑能顯示更小的字體,但目前的應用環境尚未成熟。

由于宋體基本上是目前顯示中文唯一的通用Web字體,所以12px成為最常用的字體大小。

我們當然可以依據產品的需要來修改這個默認值。

  不用考慮基于字體大小(em)的設計。

  在Chrome3.0之后的中文版中,字體大小最小值是12px,比如你設置最小字體為10px,最后也變成12px。

  行高:1.5倍  這是一個經驗值,不同的產品對這個值要求可能不同,但我們一般會設置最常用的為默認值。

比如YUI的font中是font:13px/1.231 arial,helvetica,clean,sans-serif;即字體大小默認值是13px,行高是13*1.231=16.003px,默認的行高是默認字體的1.231倍。

對于中文來說,常用的字體大小12px、14px、16px、18px等偶數大小,在IE6和IE7設置其行高也為偶數能解決一些特殊情況下的字體對其問題。

  在IE6和IE7中,行高值必須大于字體的2px才能保證字體的完整顯示或當其作為鏈接時能有效顯示下劃線。

  設置line-height時,注意不要使用單位(包括%在內),因為子節點會繼承經過運算后的line-height值,所以當使用單位后瀏覽器會把line-height計算成第一次定義的絕對值,而不會隨著字體大小的變化而變化,而無單位的數值表示是所在容器的font-size的倍數,所以設置為無單位的數值是最佳選擇。

  深入CSS 行高非常有利于理解line-height,值得一讀。

  性能和效率  大部分平臺都有arial,減少瀏覽器的查找時間。

  代碼最少,書寫方便。

arial基本上是名字最短的字體了,可以節約CSS的大小。

  所有的字母都小寫,目前Google就是這樣做的,好處是既可以編寫更快也能提升Gzip壓縮的效率。

  中文最好用unicode表示,比如使用宋體是{font-family:5b8b4f53;},使用微軟雅黑是{font-family:5fae8f6f96c59ed1;},這樣的好處是避免編碼問題,同時能得到所有的主流瀏覽器的支持。

  使用正確的字體種類寫法,避免使用引號,這樣可以縮小CSS的大小。

中文字體可以按上一條方式來編寫。

  未來  通過對中英文及符號混排的測試, 我發現微軟雅黑其實表現相當不錯,包括英文數字和英文字符以及在IE6和IE7的顯示效果上,但唯一的遺憾是在XP下如果安裝了微軟雅黑字體的用戶沒有打 開使用屏幕字體的邊緣平滑選項的話,在firefox、Safari和Opera、特別是IE6下會非常模糊難以辨認。

針對這個問題目前并沒有很好的 解決方案,所以只有等到IE6使用比率非常小的時候才可能正式的使用它。

或許需要到2014年,XP死掉的時候。

  雖然很早就有了@font-face,但是瀏覽器的支持、網速和商業問題,導致它很少被應用。

最近關于字體的好消息是Firefox3.6將支持Web Open Font Forma。

關于Web字體未來的相關信息可以看Web 字體的未來、關于 Web 字體:現狀與未來和再談 Web 字體的現狀與未來。

版權聲明:本文由 母景彰 整理編輯。

原標題:網頁設置字體,網頁默認字體大小

轉載注明出處:http://www.dn9ww09s.icu/fault/11317.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 遠程桌面,anydesk遠程桌面連接不上

    遠程桌面,anydesk遠程桌面連接不上 相關圖片anydesk怎么遠程控制計算機已進入家家戶戶如果您需要使用遠程桌面,并且在使用計算機的過程中不知道如何使用計算機的遠程程序,可以使用任意桌面它的尺寸很小它的尺寸只有1米多,...

  • 筆記本電腦怎么連wifi熱點,筆記本電腦怎么連接wifi

    筆記本電腦怎么連wifi熱點,筆記本電腦怎么連接wifi 相關圖片筆記本熱點怎么連接筆記本電腦設置WiFi熱點非常方便它可以被其他移動設備使用,如筆記本和支持無線互聯網接入的移動電話只要設置了WiFi熱點,手機就可以通過電腦的WiFi接入互聯網...

  • 搖滾字體,搖滾字體設計

    搖滾字體,搖滾字體設計 相關圖片搖滾海報一用你喜歡的字體鍵入一個200px的金色字符(我用的是豐富的超級歌曲),然后看下面的操作2這是核心步驟,就是應用震動變形的參數增量來制作搖滾波3最后,給金色的角字體...

  • 電腦遠程控制手機,手機如何遠程控制電腦

    電腦遠程控制手機,手機如何遠程控制電腦 相關圖片怎么遠程控制別人的電腦如果計算機是由某種方式控制的,那么我們就可以遠距離地維護和控制計算機遙控器還可以實現計算機的統一布置,在教學中起到很大的作用你聽說過用手機遙...

  • 電腦殺毒軟件排行榜,電腦殺毒軟件十大排名

    電腦殺毒軟件排行榜,電腦殺毒軟件十大排名 相關圖片國內殺毒軟件排行計算機安全一直是互聯網用戶頭疼的問題,現在殺毒軟件也層出不窮。計算機殺毒軟件通常集成監控識別、病毒掃描、清除和自動升級等功能一些殺毒軟件還具有數據...

  • 初試鋒芒,龍家王朝之初試鋒芒

    初試鋒芒,龍家王朝之初試鋒芒 相關圖片列那狐初試鋒芒(譯者注:由于Yeeyan編輯器解析文章中的標記,我在每個標記的符號后面添加了一個空格,例如,左尖括號 節 右尖括號我將寫一個部分,以便它能正確地顯示在文章中如...

  • 怎么組裝電腦,臺式電腦裝機步驟

    怎么組裝電腦,臺式電腦裝機步驟 相關圖片電腦裝機詳細步驟如今,計算機已經走進千家萬戶,也不斷改變著人類的生活方式以前在電視、電影、游戲機上都可以在電腦上享受。一些用戶想組裝一臺計算機,因為他們認為質量好...

  • 美麗的小竹林,漂亮的竹林圖片

    美麗的小竹林,漂亮的竹林圖片 相關圖片春天竹林的圖片一在flash中創建兩個新文件。導入參考圖片并繪制以創建繪制階段,并使用線條工具繪制輪廓2。繪制竹線藍色尺寸線是上部/下部水平竹透視線3關閉線條并用綠色標記,如...

  • 聯想筆記本如何重裝系統,筆記本如何重裝系統

    聯想筆記本如何重裝系統,筆記本如何重裝系統 相關圖片聯想筆記本進入bios聯想電腦很有名無論是工作、學習還是娛樂,很多人都在網上使用聯想電腦我們都知道這個計算機系統使用了多長時間,會有一些問題。例如,計算機的特殊卡已被更...

  • divcss布局入門教程,css布局教程

    divcss布局入門教程,css布局教程 相關圖片divcss頁面布局在網頁制作中,有很多術語,如CSS、HTML、DHTML、XHTML等在下面的文章中,我們將使用有關HTML的一些基本知識,在學習這個入門教程之前,請確保你有一css 入門...

熱評文章

  • 0x000000ed藍屏代碼,藍屏代碼0x0000000a

    0x000000ed藍屏代碼,藍屏代碼0x0000000a 相關圖片電腦藍屏代碼0x0000001a藍屏是windows系統在計算機故障時的保護措施。我們可以從藍屏界面提供的藍屏代碼中找到問題和解決方案本文將分享計算機藍屏代碼0x000000ed產生的原因和解電腦藍...

  • 螺旋,ai如何做螺旋效果

    螺旋,ai如何做螺旋效果 相關圖片光線螺旋方式讓我們看看添加步驟1后的文本效果:使用螺旋工具繪制螺旋步驟2:根據情況從中心刪除多余的節點步驟3:復制一個并適當調整大小步驟4:調整兩個螺旋的位置以對齊中心...

  • 內存ddr3和ddr4的區別,內存ddr4

    內存ddr3和ddr4的區別,內存ddr4 相關圖片內存ddr5在整機短板開始由CPU和顯卡向存儲設備轉變后,內存和固態硬盤逐漸成為主要的升級對象隨著DDR3多年占領市場,存儲器的發展也開始出現新的變化自2014年底以來,具4代內存條和...

  • 什么的威力,威力

    什么的威力,威力 相關圖片手榴彈的威力(譯者注:由于譯言編輯對文章中的標簽進行了解析,我在每個標簽符號后面加了一個空格,比如左尖括號 右尖括號,我會寫head,這樣可以在文章中正確地顯示出來。請原...

  • 電腦運行內存小怎么辦,怎么增加電腦運行內存

    電腦運行內存小怎么辦,怎么增加電腦運行內存 相關圖片電腦怎么增加內存計算機長時間使用后,隨著安裝軟件的增加,計算機的可用內存會減少,特別是C盤內存不足時,會導致計算機的運行速度下降這會影響用戶的使用,那么如何應對呢?...

  • 你有點睛之筆嗎,點睛之筆的意思是

    你有點睛之筆嗎,點睛之筆的意思是 相關圖片形容點睛之筆(譯者注:由于譯言編輯對文章中的標簽進行了解析,我在每個標簽符號后面加了一個空格,比如左尖括號 右尖括號,我會寫head,這樣可以在文章中正確地顯示出來。請原...

  • 藍屏0x000000f7怎么辦,藍屏0x0000001E

    藍屏0x000000f7怎么辦,藍屏0x0000001E 相關圖片藍屏 0x000000f4在計算機操作中,有時會遇到藍屏故障,這可能是由于使用過程中處理不當造成的無論是沒有重新安裝系統,還是以后重新安裝系統,還是出現藍屏,都說明是計算機硬件的...

  • 筆記本連接wifi后無法上網,筆記本怎么連接wifi

    筆記本連接wifi后無法上網,筆記本怎么連接wifi 相關圖片電腦連接wifi如今,筆記本電腦非常普遍,便于辦公室使用和攜帶但一些用戶表示,他們不知道如何將筆記本電腦連接到WiFi?事實上,連接互聯網的方式有很多種,比如網絡電纜連接和...

  • 瀏覽器打開在右下角,瀏覽器右下角彈窗怎么關

    瀏覽器打開在右下角,瀏覽器右下角彈窗怎么關 相關圖片每次打開網頁右下角都有廣告今天,我將介紹一個常見的網頁右下角布局示例實際上,它的實現非常簡單,即使用相對定位和絕對定位這里,我想使用絕對定位:CSS代碼部分:HTML部分:...

  • 筆記本電腦開機黑屏,筆記本電腦開機黑屏了怎么辦

    筆記本電腦開機黑屏,筆記本電腦開機黑屏了怎么辦 相關圖片筆記本電腦突然黑屏無法開機筆記本電腦因其辦公方便、社交方便等優點受到年輕人的廣泛追捧但是筆記本電腦的散熱性能不是很好,在使用過程中經常會出現一些小插曲例如,打開筆...

關注微信

变脸官网查询