還是網頁字體這事

2020-12-17 網際網路的那點事

還是網頁字體這事

P迪

|

2010-03-05 13:01:08

|

產品設計 6,428

摘要：網站中常用見的字體就是「宋體」。但現在很多電子商務網站都會有標價，這就涉及到了符號和數字，然後品牌和內容中又會有英文和字母，這就又涉及到英文字體，光用「宋體」會不協調。因為「宋體」本身是為中文字符設計的，符號、數字和英文、字母當然也應該使用英文字體來定義顯示才會更合適。前幾天做一個項目我們決定使用font-family:Verdana,Tahoma,Ari ...

網站中常用見的字體就是「宋體」。但現在很多電子商務網站都會有標價，這就涉及到了符號和數字，然後品牌和內容中又會有英文和字母，這就又涉及到英文字體，光用「宋體」會不協調。因為「宋體」本身是為中文字符設計的，符號、數字和英文、字母當然也應該使用英文字體來定義顯示才會更合適。

前幾天做一個項目我們決定使用font-family:Verdana,Tahoma,Arial,\5b8b\4f53(宋體),sans-serif的字體顯示順序（先別管合理不合理），我們測試了IE6/IE7/IE8/Firefox/chrome/(使用以上幾款瀏覽器訪問我們網站的用戶加起來佔90%以上)，在IE7/IE8瀏覽器中顯示英文和數字時字體有區別（見下圖）



「Aisleep」和「88」感覺上面有明顯的鋸齒而下面的感覺粗厚平滑一些。


大家知道，這是因為IE7/IE8瀏覽器中[屬性] > [高級]選項卡 > [多媒體]有一個ClearType(
增強屏幕字體)屬性，默認是被選中的原因(見下圖)。

如果把這個選項去掉勾，那IE7/IE8瀏覽器顯示的字體就和其它瀏覽器統一了。反之，通過Windows控制面板 >  ClearType Tuning 啟用ClearType（見下圖）

對於作業系統控制面板沒有ClearType Tuning選項的可以通過以下方式實現：

    1. 單擊[開始]，單擊[控制面板]，單擊[外觀和主題]， 然後單擊[顯示]。
    2. 在[外觀]選項卡上，單擊[效果]。
    3. 單擊選中[使用下列方式使屏幕字體的邊緣平滑]複選框，然後單擊該列表中的 ClearType[清晰]。


那以其它瀏覽器顯示的字體就會和IE7/IE8統一了。(註：據我調查大多數XP作業系統默認為「標準」)



接下來會看到一些測試和整理，目的只是為了解字體在不同設置下的特性。這裡不會有什麼字體的推薦設置，因為我認為字體的設置和你所做項目的具體情況有關，沒有什麼設置是最好的，只要清楚字體在不同設置下的特性才能在以後的應用中得心應手。

測試：12px和14px的字體大小是中文網頁中最常見的；字體family：黑體,宋體,sans-serif,Verdana,Tahoma,Arial,Helvetica(沒用雅黑字體，雅黑字體在Vista以後的作業系統才有，但根據網站數據統計80%都是XP作業系統，目前兼容性會是個問題)；文字加粗容易分辨區別，

瀏覽器：IE6/IE7/IE8/Firefox3.6/Chrome4.0。

整理：

從ClearType角度：除了IE7/IE8外其它瀏覽器字體顯示效果都是一樣的

，如何統一所有字體顯示效果，方法上面已經說過。

  • 黑體：字體大小12px/14px時ClearType設置有作用（16px/18px/20px時無作用，22px以上會有作用）；
  • 宋體（\5b8b\4f53）：字體大小12px/14px/16px/18px時ClearType設置無作用（20px以上會起作用），所以12px-18px之間的宋體在所有以上瀏覽器中能得到高度統一，但粗體的符號顯示真的很不理想比如」@」；
  • sans-serif：無襯線字，細心的一定發現唯獨這類字體上圖中出現了三種字體。在IE6和IE7/IE8中區別只是ClearType設置問題，字體其實就是Tahoma(無襯字)，但在FireFox和Chrome中調用的是宋體（襯字）（可設置）；
  • Verdana：ClearType設置會有作用，IE6/FireFox/Chrome中有明顯的鋸齒。
  • Tahoma：ClearType設置會有作用，IE6/FireFox/Chrome中有明顯的鋸齒。(仔細觀察其實Verdana和Tahoma字體外形是差不多的，只是單詞中字母間距的區別。)關於Verdana和Tahoma再延伸一下，之前看到過根據Jackob Nielsen用戶調研顯示，Verdana 字體是易讀性最高的，推薦設置為第一默認字體，前提那是英文站點。但在中文站點又要老生長談中英文排版問題，具體用什麼字體要考慮文章中是否有斜體、粗體：
    • 當ClearType設置為「標準」時，Tahoma比Verdana鋸齒感強，而且Verdana字母的間距較寬的優勢會體現出來。
    • 當ClearType設置為「清晰」時，Verdana和Tahoma效果相近。

      至於說Verdana由於字母間距的問題導致中文結合時效果不佳，各位有時間可以看看樣稿

      http://docs.google.com/Doc?id=ds4hm4h_2619p8gqhp

      ，對平常的瀏覽和排版的影響是微乎的（Verdana的字體文章會更長一些），如果我不那麼刻意去比，幾乎是看不出來的，何況是大多用戶（我做過測試把兩種字體的文章分開，分別給朋友、同事、家人等不是專業領域的人看，Ta們沒有任何意識，並且在我指出字體區別後，他們對我說：「你也太無聊了吧？」）。所以具體用什麼字體時，最關鍵還是考慮字體用在什麼對象(系統、訪問者)上，然後是字體是否會涉及到的變化：大小、斜體、粗體。

  • Arial和Helvetica：以上瀏覽器中視覺上幾乎是一致的（IE7/IE8中感覺上顏色偏深一些），無鋸齒感覺，但和Verdana、Tahoma比起來整體偏小很多。可以把字體設置的大一些，CSS樣式中就會多一行特殊的定義。


參考：



相關焦點

  • 網頁設計開發如何處理網頁字體
    在網頁設計開發過程中，最重要的莫過於網頁的視覺效果，設計人員經常花費大量精力用於調整字體和字號。利用CSS2規範，我們可以在Web頁面或應用程式中隨意對字體進行調整。本文將深入探討字體大小，並介紹在網頁和網頁應用程式中調整字體的最佳方法。
  • 怎麼改網頁字體大小?
    一般網頁的字體都是很適合一般人閱讀的，不然如果一個網站的網頁字體設置的過大或過小都會沒人去看的。但總會遇到一些特殊情況，需要改變下網頁字體大小才更好。其實很多人寫過經驗怎麼改變網頁字體大小，但大多數人都是寫的實質是改變網頁大小，並不是單單網頁字體的大小。
  • 好的字體讓你的網頁設計「傾國傾城」
    在網頁的構成元素中，文字的設計與編排是重要元素之一，它們雖然佔據的存儲空間非常小，但在網頁上佔據的面積卻是不容忽視的。對設計師來說，文字除了表達含義，還應該具有傳遞感情的功能，這種傳遞就需要通過字體、字號以及顏色來表達了。
  • 網頁設計規範(尺寸、字體篇)
    To B 端是面向商家和專業人士，因而TO B與 TO C端在設計上是大相逕庭的， To B 類網頁最重要的是效率而不是體驗。因網際網路的發展，現今對網頁設計的要求也提高了，所以有個自己的設計規範會使設計簡潔而高效。根據本大寶貝的設計細節，相信你很快就能與大神比擬了，哈哈哈哈，開個小玩笑，下面咱們就從尺寸、字體、圖片、顏色等方面來開展深入探索！
  • 2018年網頁文本字體的設計趨勢有這7種
    字體的展示和排版自然也是網頁設計師工作的重要內容之一。今天，我們搜集了2018年網頁設計領域正在流行的文字排版設計趨勢，與你分享。2006年，Oliver Reichenstein 撰寫了文章《網頁設計95%的工作是排版》，這是當年最有爭議的文章之一。 Reichenstein 在文章中這麼說道：「網頁設計不僅僅是挑選並使用精美的字體，更多的是關於我們如何在設計中使用它們 。」
  • 網頁常用字體設計,你最喜歡哪一種?
    作為網頁設計師,我們希望有精美的字體來幫助我們為網頁排版，好的排版是組成優秀網頁設計的重要組成部分，字體在網頁設計中扮演了相對重要的一個角色,所以在網站中,選用什麼樣的字體也是一個相對比較重要的工作，今天跟大家分享下在網站當中常用的字體。
  • 網頁字體設置原來有這麼多要求
    你知道網頁字體設置有這麼要求嗎？下面來為大家介紹一下關於網頁字體的相關要求。這四個英文代稱是在字體大小設置中常見的，必須要進行了解。二、關於字體主題的設置在網頁的眾多字體中，較多的設計者會將網頁字體的主題設置成宋體，為了能夠平衡使用者的視覺效果。需要注意一點，如果使用宋體作為網頁的字體主題，一定要避免中文中的生僻字出現，避免字體出現問題。
  • 網頁規範字體,你做對了嗎?
    關於網頁上百分之九十五的信息是「文字」，大多數人瀏覽網頁的狀態就是閱讀，也就是你目前正在做的事情。因此作為一名前端工程師，讓文字更好地在網頁顯示，是一件極其重要的工作。字體排印有兩種形式，一種稱為 Creative Typography，另一種稱為 Technical Typography。
  • 網絡字體@font-face 如何處理網頁中的特殊字體
    HTML5學堂：隨著網頁的發展，網頁中出現了越來越多的字體種類，網頁自帶的微軟雅黑、宋體、黑體已經越來越難以滿足設計的需要，那麼，如何在網站中使用比較特殊的字體
  • Google網頁字體在線服務 設計師的福音
    目前網頁上使用的字體都是常見的幾種，如』Lucida Grande』， Verdana， Arial， Sans-Serif，中文常見的有宋體。要想用比較個性的字體就比較麻煩了，因為你不能保證客戶端是否支持這種字體，常用的方法是用Photoshop把文字製作成圖片。
  • FontFonter.com:隨意調換網頁的字體
    FontFonter.com：隨意調換網頁的字體不知道當你成天看到網頁字體清一色的宋體、黑體或微軟雅黑的時候，有沒有一種疲倦的感覺?或許你已經習慣地毫無感覺，但當不同字體有明顯對比的時候，你會發現在看什麼網頁時、期待什麼樣的字體?今天所介紹的網站FontFonter.com(http://fontfonter.com/)所要做的就是讓用戶可以隨時隨地地調換任何網頁的字體，體現一種變化的感覺，所謂「Try All The Fonts That You Want」。
  • 新版Win10讓網頁字體更漂亮!
    IT之家3月14日消息 隨著Windows 10 Insider Build 17120的到來，微軟也公布了該版本系統的一系列新特性，其中一項是Edge瀏覽器對可變字體（Variable Fonts）的全面支持。
  • 超大字體排版的網頁設計欣賞
    今天的網頁設計,在字體上面往往喜歡展示非常大的字體。這些開放的網站，將文本尺寸放大到極致!
  • 【超實用】如何給你的網頁選擇合適的字體?
    為其應用了四種不同的字體後，體現出來了不同的形態和粗細大小。在中文字體中，不同的字體，在字間距中通常沒有很大的變化。而對於右邊圖種的英文字體，不同的字體會改變字母的大小，導致整體的尺寸布局不同，進而導致整個排版混亂。相同的字體大小，在不同的字體下面，顯示的效果幾乎完全不同。這是英文字體選擇中，比較麻煩和頭疼的問題。
  • 深談網頁設計中的字體應用Font Set
    最近有不少人都提及了網頁上該如何選擇字體的問題。問題雖然小，但是卻是前端開發中的基本，因為目前的網頁，還是以文字信息為主，而字體，作為文字表現形式的最重要參數之一，自然有著相當重要的地位。Hihi, 大家好~ 最近有不少人都提及了網頁上該如何選擇字體的問題。
  • 用特殊字體輕鬆Show網頁
    ，會犯這樣一個錯誤——在網頁中使用了很多種特殊的精美的字體，當網友們瀏覽時，卻因沒有安裝相應的字庫，只能看到默認的宋體字，效果慘不忍睹。利用圖片的方式來顯示這些特殊字體，會使網頁的體積增大很多，而且還不能方便地複製網頁的內容。好在微軟公司發布了一款名為Microsoft Web Embedding Font Tool （WEFT）的軟體，可以很方便地解決在網頁中嵌入特殊字體的這一難題。
  • 我們觀察到,2018年網頁文本字體的設計趨勢有這7種
    字體的展示和排版自然也是網頁設計師工作的重要內容之一。今天，我們搜集了2018年網頁設計領域正在流行的文字排版設計趨勢，與你分享。2006年，Oliver Reichenstein 撰寫了文章《網頁設計95%的工作是排版》，這是當年最有爭議的文章之一。
  • CSS教程:網頁字體及字體大小的設計
    字體大小CSS2規範根據長度——水平和垂直尺寸——來定義字體。這個長度為一個數值，前面可能帶一個可選的加(+)或減(-)標記符。另外，該數值後可能有一個可選的單位標識符。另外，CSS2規範定義了兩個單位類型:絕對單位和相對單位。
  • 網頁窗口字體大小的更改
    我們在瀏覽網頁的時候，老年人也許喜歡比較大的頁面，這樣瀏覽起來會比較舒服，年輕人視力較好的也許喜歡比較小的字體，這樣根據自己的需要進行調整，以達到最好的舒適度。點擊頁面右上角的「工具」，「縮放」然後選擇對應的縮放比例。這樣可以按照對應的縮放比例進行放大或者縮小。
  • Vista和IE7下,我們該如何定義網頁字體
    可是看了一段時間半像素半Cleartype形式的組合字體後，眼睛確實很累。突然想到，VISTA和IE的字體以及ClearType模式是可以自定義設置的，但您的中文網站適用性和通用性，做好準備了麼？下面我把最近的一些體會與大家分享。一、我們現在是否在亂用字體？