體在網站中扮演了相對重要的一個角色，所以在網站中，選用什么樣的字體也是一個相對比較重要的工作。今天跟大家分享下在網站當中常用的8款字體。

都知道，字體主要分為稱線字和無稱線字。其實細分的話還有等寬字體、夢幻字體和花體字。但今天我們主要針對常用的稱線字和非稱線字來講。

稱線字和非稱線字的區別可以看下圖：

可以看到左邊的中文和英文字屬于稱線字，右邊中文和英文屬于非稱線字。稱線字指的是在字的筆畫開始、結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。比如我們常用的宋體，觀察比劃可以看到橫細豎粗的特點，這就是典型的稱線字。非稱線字也叫無稱線字，無襯線字體沒有這些額外的裝飾，而且筆畫的粗細差不多。比如微軟雅黑。

稱線字體容易識別，它強調了每個字母筆畫的開始和結束，因此易讀性比較高，非稱線字則比較醒目。所以，在使用的過程中需要根據網站的定位而選擇相應的字體。

下面簡單給大家介紹網頁中常用的幾種字體：

1、微軟雅黑

Vista之后新引入的字體，這個字體的使用率不用說了，可以說是web里面最安全的一個字體。字體方正、簡潔，被廣泛使用。

上海大眾這個網站默認的首選字體就是微軟雅黑，整體比較簡潔。

2、黑體

黑體字和微軟雅黑差不多，作為非稱線字中的一種，一樣具備方正、簡潔、醒目的特點。這樣的字體特別適合當標題。其實黑體在使用上沒有微軟雅黑來得清晰明亮，一般在微軟雅黑和黑體的選擇下，個人更傾向微軟雅黑。

佳能的官網默認首選的字體就是黑體，字體簡潔醒目。

3、華文細黑

華文細黑是Mac下的默認中文，這套字體跟前面的微軟雅黑相比較，更顯絹細、秀氣。筆劃細節比微軟雅黑處理的多一些，所以整體給人比較精致的感覺。注意一下，華文細黑并不是所有電腦的自帶字體，當網站文字用到這個字體的時候，是需要在自己電腦上下載這套字體的。除此，在寫css代碼的時候，font-family應該設置的選擇性多一下，以保證界面打開的最佳效果。

這個字體就不給大家做展示效果了，因為這個不是系統的默認字體，電腦上沒有安裝這個字體的也看不到網頁的原始效果。

4、中易宋體

前面介紹的三款字體都是非稱線字，接著要介紹的是稱線字體——中易宋體，簡稱宋體。宋體在我們的日常中使用范圍也很廣，這是電腦自帶的其中一種字體。宋體是為適應印刷術而出現的一種漢字字體。筆劃有粗細變化，常用于書籍、雜志、報紙印刷的正文排版，所以在大篇幅文章的設計時，可以采用宋體。這個字體是Windows系統下最常見的字體，小字體點陣，大字體TrueType。大標題顯示時字體不是很好看，所以一般不建議用宋體來當標題。

上海漢路律師事務所的網站就是采用了宋體字，這種字體的選擇一般出現在一些個性比較強的網站中，傳統、專業、公正、官方、權威，宋體就表現了這種特點。

5、 Arial

說到Arial，這套字體是微軟公司網頁核心字體之一，最常用的sans serif字體，當字號很小時不容易閱讀。但是，大寫的“I”和小寫的“l”是無法區別的，所以一般可以考慮用Tahoma字體來替代。這套字體方正、不花巧、方便閱讀和印刷清晰。使用范圍也是特別的廣泛。但是要知道的是，蘋果系統下是沒有這套字體的，蘋果系統下默認的是Helvetica。

可以看下禪道項目管理軟件的英文網站，幻燈片采用的字體就是Arial，可以看下這套字體在幻燈片下粗細的組合形態。

6、Tahoma

Tahoma是英文Windows操作系統的默認字體，這個字體比較均衡，是種非常圓滑的字體。這個字體和中文混排顯示時，不會出現中英文不對齊的狀態。這套字體解決了Arial大寫“I”與小寫“l”難以分辨的問題。也相當于在Arial上優化了不少。除此，細看這套字體，可以發現其實在一些筆劃的處理上還是很精致的。

zui前端框架網站，英文字體的設置上也用到了這個字體，雖然不是第一優先選擇，但是可以看出Tahoma這套字體的使用率也是很高的。

7、Helvetica

說到Helvetica這套字體，應該是設計師們的最愛了吧。這套字體屬于 Realist風格，擁有簡潔現代的線條，受到大部分設計師的追捧。這種字體給人一種簡單、現代化、休閑輕松的感覺。適用于扁平化設計，也適合搭配任何設計項目，包括banner、平面設計以及網頁字體等。在Mac下面被認為是最佳的網頁字體，但在Windows下由于Hinting的原因顯示很糟糕。

這個字體主要體現在蘋果官網上，可以看下美國的官網。

8、Georgia

說到英文的稱線字，肯定首選是Georgia。這套字體筆劃粗重，襯線明線，輪廓較大，小字體顯示也很清晰，同時細節還不錯。此種字體風格優雅又精致，可用于電影海報、游戲、時尚類網頁設計中。

林肯的官網，Georgia是官網的第二優先選擇顯示的字體。網站比較現代，在一些幻燈片當中結合了Georgia字體，稱線字和非稱線字的相結合，可以使得整個網站更生動。

在專業的網頁設計里，除了Banner圖、廣告語等特殊情況可能會用到特殊字體，網頁中使用的字體以不超過2種為準，并且最好采用標準字體，比如中文的宋體、微軟雅黑，英文的Arial、Helvetica。只有使用這些系統自帶的字體，才能讓前端開發人員在排版時高程度地還原設計稿的文字效果。倘若使用了特殊字體，在設計font-family的時候，應該多設置幾種字體的優先順序，以確保網頁顯示的最佳效果。當然，我們一般情況下建議使用系統自帶的字體。

以上8種網站中常用的字體介紹和示例，希望可以對大家有所幫助。

注意：部分字體使用過程中涉及商業版權，請慎重選擇。

ul li 橫排居中排列的方法

無序列表的列表項默認情況下是豎著排的，因為li元素是塊級元素，會自動分行。那如果要將列表的列表項進行橫排，比用無序列表ul元素定義一個導航條。那該怎么辦呢？這當中有三個應當被解決的東西，一個是橫排本身，另一個就是應當把無序列表項的圓點去掉，第三則是讓ul定義的列表居中顯示，包括水平居中和垂直居中。方法如下：

ul li橫排的方法

將ul無序列表元素中的列表項li元素的display屬性設置成inline或inline-block，個人比較常用的是后者：

ul li{display:inline-block;}

ul水平居中和垂直居中的方法

水平居中方法：只要將ul元素包含于一個div元素，并將div元素的text-align屬性設置為center即可將ul水平居中。除此之外，因為ul的列表默認情況下是有左內邊距的，所以，為了能夠讓列表能夠更好地水平居中，需要將ul的左內邊距padding-left設置為0，具體可見下方的綜合實例。

垂直居中方法：為包含ul元素的div元素設置寬度width和高度height（實際上導航條一般也需要有寬度和高度的設置），然后將ul的line-height屬性設置為父元素的高度height即可。

去掉圓點的方法

將ul元素的list-style屬性設置為none即可。

ul li 橫排居中排列綜合實例代碼，及在線編輯器

<div class='e1'>
  <ul class='e2'>
    <li>HTML</li>
    <li>python</li>
    <li>golang</li>
  </ul>
</div>

<style>
  .e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
  .e2{list-style:none;padding-left:0%;}
  .e2 li{line-height:50px;display:inline-block;}
</style>

HTML+CSS+JS實例在線編輯器：

HTML ul li 橫排居中排列的方法，綜合實例在線 - HTML教程

實例代碼解析

如上代碼，一定要將ul的左內邊距padding-left設置為0，否則ul列表的“水平居中”將偏向右邊，大家可以將.e2中的padding-left刪除掉，然后再在線運行看一看效果。

python全棧：

笨鳥工具-璞玉天成，大器晚成