CSS控制字型效果的思考

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

字型的處理在網頁設計中無論怎麼強調也不為過，畢竟網頁使用來傳遞資訊的，而最經典最直接的資訊傳遞方式就是文字，所以，瞭解一點字型的基本知識對於設計來說還是非常重要的。

　　中文和英文的最大區別就是中文是方塊字，英文是拼音文字，這對字型的處理的影響是巨大的。看看下面的圖示就會發現，英文字型裡的那些變化在中文字型裡都弱化了。

　　作為中文的讀者，習慣性的接受方塊形狀做為閱讀的單元，其實對於眼睛來說，這是一種容易疲勞的方式，閱讀的時候你的視線實際上是跟隨整行文字的外形。看看這個例子。

　　NOW I'VE TRIED TO TALK TO YOU AND MAKE YOU UNDERSTAND

　　Now I've tried to talk to you and make you understand

　　哪一行更容易閱讀呢？

　　第一行和中文的情形有些類似，不同的是，每個中文單字就好比一幅畫，其變化要比26個英文字母豐富的多，對於我們來說，我們接受了這個特點，但是設計時還是有一些問題需要考慮，我不是設計師，如果說的不對，請在下面留言討論。這些內容在我教授Typography的時候是作為一般原則來提出的。我也告訴學生一句話：“The purpose of rule is to break the rule.” 設計原則本身就是為了打破原則，這也是所謂的creativity的表現。問題是你需要Crowdsourced Security Testing道原則，並且順從原則進行練習，只有在你熟悉原則之後才有可能打破原則顯現你的創造性，打破原則不意味著原則的缺陷和錯誤，只是你對這些原則的別出心裁的使用，你打破了一些，同時也對你所破壞的部分做一定的補償，似乎很有點哲學的味道。

　　我個人以為比較重要的適用於英文的幾個原則如下。

　　一、字型的用途

　　字型的選用要考慮該文字的用途，是做標題呢，還是段落文字？

　　通常來說 san serif 字型適合作為標題使用，例如 Arial；serif 字型適合作為段落文字使用，例如Time New Roman。對於網頁設計來說，有幾個字型是我強烈推薦的，verdana, tahoma, georgia。事實上，像 Verdana 這個字型是由世界上頂級的字型設計師花了差不多兩年時間設計出來的，Microsoft負責買單，然後免費提供給使用者，這個字型是IE安裝的一部分，如果你安裝了IE 4以上的版本，你的電腦裡就一定有這個字型，所以你不必擔心使用者是否有這個字型。它的設計考慮了字型在螢幕上顯示的可能面對的問題，而且提供了近乎完美的答案。唯一的麻煩是它的近乎完美造成了我們使用的時候沒有了個性，因為每個人都使用它。

二、字型大小的大小

　　論壇裡很多討論，關於pixle 好還是point好？我就不重複了，在這裡我想提出的是字型大小的大小在CSS裡，有很多不同的單位，大致上有三類，

　　絕對大小：mm, cm, in, pt, pc
　　相對大小：em, ex
　　相對於裝置：px

　　可能要多說幾句的是 em 和 ex，em 在 css 裡代表就是字型字型大小的大小，例如對於12 pt的字型來說, 1 em 就等於12 pt 範例：

　　p {
　　　　font-size: 10pt;
　　　　text-indent: 1em
　　}

　　也許你會說我可以用text-indent: 10pt來實現同樣的效果啊，但那隻是在理想的情形下，如果使用者覺得他的瀏覽器設定字型大小為14pt更好的時候，你所設計的比例就失去了，所以相對尺寸對於網頁的延展性設計是非常有利的。

　　ex 和 em 類似，但不盡相同，回到上面的圖示，x-height 對於每一種字型來說是不同的，ex 是根據字型的 x-height 來定義字型的大小。

　　三、對齊

　　最好使用靠左對齊，尤其要避免使用左靠右對齊，除非你有一個特殊的設計目的，靠左對齊時右側的不對齊正是為了閱讀的方便，右側的變化對你的視力是一個協助，它藉助變化告訴你的眼睛可以換行了。

　　四、行間距

　　行間距取決於字型的大小，一般來說，小的字型大小需要大一點的行間距來便於閱讀，中文字型在網頁上如果沒有行間距的設定，對於閱讀大段文字來說是讀者的災難，所以適當設定line-height是非常必要的。一般地， line-height 在網頁設計中應該是字型大小的1.5倍到2倍。Word 和其它的文本編輯軟體裡，一般設定字型的120%作為預設的行間距。css裡的 line- height 設定，是均分後加在每一行的上下，也就是說，如果 line-height 設定為 20px 的話，那麼每一行文字的上下各有10px的間距。

　　五、字間距和字元間距

　　很特殊的用途，對中文來說這兩者應該是相同的。這個設定的本身就是為瞭解決某些字型設計上缺陷，來增加文字的可讀性。

CSS製作11種風格不同的特效文字

..:: 巧用CSS製作藝術字 ::..

如果靈活應用CSS各種濾鏡的特點並加以組合，我們可以得到許多意想不到的效果。這是一些效果示範，供各位參考。

西部電子

用blur濾鏡做出的效果，代碼如下：
FILTER: blur(direction=135,strength=8)

西部電子

用dropshadow濾鏡做出的效果，代碼如下：
FILTER: dropshadow(color=#B4BBCF,offx=6,offy=6,positive=1)

西部電子

用glow濾鏡做出的效果，代碼如下：
FILTER: glow(color=#B4BBCF,strength=5)

西部電子

這個效果用到了兩種濾鏡：shadow和alpha，代碼如下：
FILTER: alpha(opacity=100,finishiopacity=0,style=1)
shadow(color=#8C96B5,direction=135)

西部電子

這個效果也用到兩個濾鏡mask和shadow，代碼如下：
FILTER: mask(color=#E1E4EC)
shadow(color=#8C96B5,direction=135)chroma(color=#E1E4EC)

注意：mask的顏色要和網頁背景色一致，字型的顏色由shadow決定。

西部電子

如果說上面的效果是陰文的話，那麼這個效果的應該算是陽文了，用兩個濾鏡實現mask和dropshadow，注意mask的顏色要和網頁背景色一致，或者把mask和chroma成對使用，也可達到同樣效果。代碼如下：
FILTER: mask(color=#E1E4EC)
dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)
chroma(color=#E1E4EC)"

西部電子

用glow濾鏡可以做空心字，方法是將字型顏色設定為背景色，再將glow濾鏡的strenght的值設定為1或2即可。這個效果的代碼如下：
FILTER: glow(color=#8C96B5,strength=2)
shadow(color=#B4BBCF,direction=135)

西部電子

如果背景採用圖片，為了能達到滿意的效果需要將mask和chroma組合使用，這樣能使字型感覺是透明的，讓背景透出來。

上面列出的效果前者的代碼是：
FILTER: mask(color=#E1E4EC)
shadow(color=#B4BBCF,direction=135)
chroma(color=#E1E4EC)
注意：字型的顏色由shadow決定，mask和chroma的顏色要相同，色彩任意。

中間的代碼是：
FILTER: glow(strength=1)
mask(color=#B4BBCF)
chroma(color=#B4BBCF)
注意：mask和chroma的顏色相同，這個顏色決定了字型的顏色。

後者的代碼是：
FILTER: mask(color=#E1E4EC)
dropshadow(color=#B4BBCF,offx=-3,offy=-3,positive=1)
chroma(color=#E1E4EC)
注意：mask和chroma的顏色相同，色彩由dropshadow決定。

WELCOME TO
WWW.WESTE.COM

這個效果的代碼：
FILTER: glow(strength=4)mask(color=#E1E4EC)

這個是網頁的背景色從上下到由藍色到白色的漸層！
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#46B5FF,endColorStr=#ffffff)" >

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More