網頁常用的字型

serif 字型在字元筆畫末端有叫做襯線的小細節，這些細節在大寫字母中特別明顯。

sans-serif 字型在字元筆畫末端沒有任何細節，與serif字型相比，他們的外形更簡單。

monospace 字型，每個字母的寬度相等，通常用於計算機相關書籍中排版**塊。

fantasy 和 cuisive 字型在瀏覽器中不常用，在各個瀏覽器中有明顯的差異。

**demo

doctype html

>
<
html
>
<
head
>
<
meta 
charset
="utf-8"
>
<
title
>font
title
>
<
meta 
name
="viewport"
content
="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"
/>
<
meta 
name
="author"
content
="@my_programmer"
>
<
style 
type
="text/css"
>
/*重置
imgli
/*}重置
*/div
style
>
head
>
<
body
>
<
br/>
--網頁字型通常分為5類--
<
div 
style
="font-family: sans-serif;"
>你好 hello world    sans-serif(無襯線) 
div>
<
div 
style
="font-family: serif;"
>你好 hello world    serif(襯線) 
div>
<
div 
style
="font-family: monospace;"
>你好 hello world    monospace(等寬) 
div>
<
div 
style
="font-family: fantasy;"
>你好 hello world      fantasy(夢幻) 
div>
<
div 
style
="font-family: cuisive;"
>你好 hello world    cuisive(草體) 
div>
<
br/>
--無襯線類--
<
div 
style
="font-family: helvetica, sans-serif;"
>你好 hello world    helvetica 
div>
<
div 
style
="font-family: arial, sans-serif;"
>你好 hello world    arial 
div>
<
div 
style
="font-family: 'lucida grande', sans-serif;"
>你好 hello world    lucida grande 
div>
<
div 
style
="font-family: verdana,sans-serif;"
>你好 hello world    verdana 
div>
<
div 
style
="font-family: tahoma, sans-serif;"
>你好 hello world    tahoma 
div>
<
div 
style
="font-family: 'trebuchet ms', sans-serif;"
>你好 hello world    trebuchet ms 
div>
<
br/>
--襯線類--
<
div 
style
="font-family: georgia, serif;"
>你好 hello world    georgia 
div>
<
div 
style
="font-family: times, serif;"
>你好 hello world    times 
div>
<
br/>
--中文字型--
<
div 
style
="font-family: 宋體"
>你好 hello world    宋體 
div>
<
div 
style
="font-family: 微軟雅黑"
>你好 hello world    微軟雅黑 
div>
<
div 
style
="font-family: 華文細黑"
>你好 hello world    華文細黑 
div>
<
div 
style
="font-family: 黑體"
>你好 hello world    黑體 
div>
body
>
html
>

在chrome上顯示的結果

在ie8上顯示的結果

網頁設計的字型

字型的處理在網頁設計中無論怎麼強調也不為過，畢竟網頁使用來傳遞資訊的，而最經典最直接的資訊傳遞方式就是文字，所以，了解一點字型的基本知識對於設計來說還是非常重要的。中文和英文的最大區別就是中文是方塊字，英文是拼音文字，這對字型的處理的影響是巨大的。看看下面的圖示就會發現，英文本型裡的那些變化在中文字...

網頁常用字型（CSS樣式）記錄

說明 乙個頁面要美觀，首先要選好預設字型，這裡記錄了一些大型 的常用字型css 樣式，方便大家學習和使用 neat字型 注 neat.css是乙個非常優秀的，多瀏覽器相容性樣式解決方案，詳情請參考官網 body,button,1 input,1 select,1 textarea 1 qq官網首頁字...

前端網頁字型科普

常見的字型可以分為兩類 襯線體 無襯線體。1 serif 襯線體 在字的筆畫開始 結束的地方有額外的裝飾，而且筆畫的粗細會有所不同。常見的襯線體有 宋體 楷體 times new roman 2 sans serif 無襯線體 筆劃粗細基本一致，只剩下主幹，造型簡明有力，起源也很晚。適用於標題 廣告...