【轉載】Serif和Sans-serif字體的區別

来源:http://www.cnblogs.com/moqiutao/archive/2016/03/13/5273364.html
-Advertisement-
Play Games

在西方國家羅馬字母陣營中,字體分為兩大種類:Sans Serif和Serif,打字機體雖然也屬於Sans Serif,但由於是等寬字體,所以另外獨立出Monospace這一種類,例如在Web中,表示代碼時常常要使用等寬字體。  Serif的意思是,在字的筆劃開始及結束的地方有額外的裝飾,而且筆劃的粗


  在西方國家羅馬字母陣營中,字體分為兩大種類:Sans Serif和Serif,打字機體雖然也屬於Sans Serif,但由於是等寬字體,所以另外獨立出Monospace這一種類,例如在Web中,表示代碼時常常要使用等寬字體。 

  Serif的意思是,在字的筆劃開始及結束的地方有額外的裝飾,而且筆劃的粗細會因直橫的不同而有不同。相反的,Sans Serif則沒有這些額外的裝飾,筆劃粗細大致差不多。如下圖: 

  

可以看出,我們平時所用的Georgia、Times New Roman等就屬於Serif字體,而Arial、Tahoma、Verdana等則屬於Sans Serif字體。對中文而言,同樣存在這兩大種類,很明顯,宋體、細明體(繁體中常用)等就屬於Serif,而黑體、幼圓等則屬於Sans Serif。 

  Serif和Sans Serif的一般比較:

  ①Serif的字體容易辨認,因此易讀性較高。反之Sans Serif則較醒目,但在行文閱讀的情況下,Sans Serif容易造成字母辨認的困擾,常會有來回重讀及上下行錯亂的情形。

  ②Serif強調了字母筆劃的開始及結束,因此較易前後連續性的辨識。 

  ③Serif強調一個word,而非單一的字母,反之Sans Serif則強調個別字母。

  ④在小字體的場合,通常Sans Serif比Serif更清晰。

  因為黑體字屬於“無襯線體”(Sans-serif),而宋體字屬於“有襯線體”(Serif),後者對於人眼的辨識來說會更輕鬆一些,所以閱讀的時候會比較舒服。日本文字偏歐美的無襯線體(Sans-serif),所以大部分的人都使用歌德體(相當於西洋文字的無襯線體)。

適用用途:

  通常文章的內文、正文使用的是易讀性較佳的Serif字體,這可增加易讀性,而且長時間閱讀下因為會以word為單位來閱讀,較不容易疲倦。而標題、表格內用字則採用較醒目的Sans Serif字體,它需要顯著、醒目,但不必長時間盯著這些字來閱讀。 

  像宣傳品、海報類,為求醒目,它的短篇的段落也會採用Sans Serif字體。但在書籍、報刊雜誌,正文有相當篇幅的情形下,則應採用Serif字體來減輕讀者閱讀上的負擔。在Web設計及瀏覽器設置中也應遵循此原則為是。  

  實際應用:

  在Firefox 中(目前似乎只有Firefox有此功能),可以分別單獨指定Sans Serif、Serif及Monospace的中西文字體,然而這個選項並未設置在工具菜單中,不過可以在Addressbar中鍵入about: config,然後在Filter中過濾font找到如下Preference Name:

Code:
font.name.monospace.x-western
font.name.monospace.zh-CN
font.name.sans-serif.x-western
font.name.sans-serif.zh-CN
font.name.serif.x-western
font.name.serif.zh-CN

你可以依照上述Sans Serif、Serif及Monospace的原則來分別指定一種對應字體,按照W3C的CSS規則,在font(或者font-family)的最後都要求指定一個Serif這樣的Generic-family,避免客戶端實在沒有指定字體時使用本機上的Serif預設字體。

  

因為襯線字體的可讀性非常好,所以它應用的最多的地方也正是出版物或者印刷品的正文內容等以大段文字作為表現形式的作品上。

比較常見的襯線字體有:Georgia, Garamond, Times New Roman, 中文的宋體等等。

無襯線字體比較圓滑,線條一般粗細均勻。比較適合用作藝術字、標題等。因為無襯線字體通常粗細比較均勻,所以在小字體顯示的時候,可讀性會降低,容易引起視覺疲勞。

  常見的無襯線字體有:Trebuchet MS, Tahoma, Verdana, Arial, Helvetica, 中文的幼圓,隸書等等。

  其他的通用字體族

  印刷學中,除了serif和sans-serif之外,通常還有Monospace等寬字體、scripts手寫體(比如花體)、blackletter鉛字體(也叫gothic哥特體。嚴格的說,很多常用的serif字體其實是gothic字體)、ornamental 裝飾體(那些在文字筆划上或者周圍有裝飾花紋的字體。很多中世紀書籍上很常見。如果腦殘體真的成了字體,那麼應該可以算裝飾體吧……)和symbol 符號字體(比如有名的wedding123……)

  Monospace等寬字體:

  所謂的等寬字體,是指每個字元寬度都一致的字體。一個著名的例子就是 Courier New 字體。因為字元寬度一致,所以特別容易對齊,能快速精確的定位到某行某列,因此經常用來顯示代碼。

  Cursive書寫體:相當於印刷學中的手寫體。中文的華文行草就是這樣的一個字體。

  網頁設計中的預設字體:字體大小(12px)、行高(18px)

font: 12px/1.5 Tahoma, Helvetica, Arial, sans-serif;

  ①font-family預設採用Tahoma. Tahoma是英文Windows操作系統的預設字體,這個字體比較均衡,顯示中英文混排很不錯,是經久耐看的一款字體。

  ②Mac OS X系統有一款比Tahoma更典雅的系統預設字體:Helvetica,非Mac系統的Helvetica字體都是Rip版。

  ③Arial是早期Windows英文系統的預設字體,XP和Vista上都是Tahoma。

  ④最後的sans-serif是針對強悍的Linux DIY族。Linux預設只有kernel,字體完全由用戶自定義,針對這部分用戶,sans-serif可能能派上用場。

  ⑤最後,無論在XP還是Vista下,不指定網頁的中文字體時,預設就是宋體。因此font-family里的'宋體'是多餘的,可以省去。

 

轉載地址:http://kb.cnblogs.com/page/192018/


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 想要實現這樣一個父元素中的子元素都是居中的 只需在父元素上加樣式 設置為flexbox佈局,方向為縱向排列,第三句是使其居中。 如果三個子元素的距離要自己設定,就設置margin-top或margin-bottom就好了; 如果讓其自動調整,可以給父元素的樣式再加上 這樣剩餘的空間會自動分配到各元素
  • 時光車輪滾滾碾來,前端之路永無止歇.對於這個前端這門精一多專的技術,任何一次技術革新,我們都必須第一時間去瞭解它學習它,比如Web世界里這簇美艷的花朵 HTML5.雖然HTML5發佈之初,許多人(包括我)都覺得普及它還很遙遠,但自發佈以來,許多企業級網站對它的嘗試應用(比如<!doctype htm
  • ajax()方法是jQuery底層的ajax實現,通過HTTP請求載入遠程數據。 參數說明: type:請求方式,“POST”或者“GET”,預設為“GET”。 url:發送請求的地址。 data:要向伺服器傳遞的數據,已key:value的形式書寫(id:1)。GET請求會附加到url後面。 as
  • 簡單js JavaScript 是一個鬆散性的語言 對象屬性卻不想c中的結構體或者c++ 和java的對象, 對象繼承機制 使用原型的prototype(原型鏈),js的分為三部分ECMAScript 、文檔DOM對象、瀏覽器BOM對象 1. 核心(ECMAScript) (語法、類型、語句、關鍵字
  • Chapter4 變數、作用域和記憶體問題 l  理解基本類型和引用類型的值 l  理解執行環境 l  理解垃圾收集   4.1基本類型和引用類型的值 l  ECMAScript變數包含兩種不同數據類型的值:基本類型值和引用類型值。 l  在將一個值賦給變數時,解析器必須確定這個值是基本類型值還是引用
  •   第一節 搭建開發環境 第二節 顯示頁面標題 第三節 實現頁面佈局      React Native,是顛覆性的移動開發技術。它使用js開發,又是原生應用,不同於Hybrid. 簡單的理解:它提供一個原生項目,然後規定js與原生項目的介面,編譯原生項目,打包程式員編寫的js, 共同形成一個完整的
  • 單擊,顯示警告框。onclick特性的值不能使用未經轉移的HTML語法字元:&,",<,>。若想使用雙引號: 通過event變數,可以直接訪問事件對象,且,在函數內部,this值等於事件的目標元素,例: 還可以使用擴展作用域,在函數內部可以像訪問局部對象一樣訪問document及該元素本身,so可以
  • 第一次玩codewars,選了個最簡單的題目 要求是: You have to write a function that describe Leo: if oscar was (integer) 88, you have to return "Leo finally won the oscar!
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...