CSS 字體樣式

網頁當中除了「圖片」編排~「字體的樣式」也對整體美感有很大的影響噢!!

這篇語法教學文章要來介紹CSS字體屬性與屬性值應用

我的語法教學文~都是以自己的版型需求做設定

如果複製未經修改直接貼到你們自己的樣式

就會出現和我一樣的效果

所以針對個人的需求語法再自行修正囉!!

帶走語法的人請留言鼓勵(告知)我一下噢!!
如果可以順便的話順便「推 + 讚」.....((誤))
發現別人悶不吭聲的使用了自己的教學後奇蒙子真的不美麗!!
留言打幾個字告知的時間~~不會比我在試驗的時間還多吧?!
如果連這個小小的請求都無法配合....
不要逼我把這種~~沒禮貌的小賊~~公諸於世
還有分享的人也請基於尊重個人智慧財產權的前提~~別忘了~~標明出處!!
敬請配合~~感恩蛤XD

語法開始

font-family　設定字體類型的樣式與結果

font-family:tahoma;　/* 結果：ABCDEFG */
font-family:arial;　/* 結果：ABCDEFG */
font-family:Courier New;　/* 結果：ABCDEFG */
font-family:impact;　/* 結果：ABCDEFG */
font-family:Microsoft JhengHei;　/* 結果：ABCDEFG */
font-family:verdana;　/* 結果：ABCDEFG */

如果瀏覽器沒有內建的某些特殊(美工)的字型是顯示不出來的噢!!
建議可以多設定幾個字型讓瀏覽器自己判斷~範例如下：

font-family:tahoma,arial,Courier New,impact;　★以逗號分隔或增加

font-size　設定字體大小的樣式與結果

font-size:12px;　/* 結果：字體大小為12px */
font-size:0.5cm;　/* 結果：字體大小為0.5cm */
font-size:medium;　/* 結果：字體大小為Medium */
font-size:100%;　/* 結果：字體大小為100% ((數值可自訂)) */

設定字體大小的屬性還有「small」、「x-small」、「xx-small」、「large」
、「x-large」、「xx-large」和「inherit」等等~
都是跟父層有關，是以父層為基準的百分比大小；
而inherit則是繼承自父層的文字大小，inherit在目前的IE瀏覽器中並不支援
未來IE是否會支援目前尚未知道..所以不在此多做介紹

font-size　設定字體粗細的樣式

font-weight:normal;　/* 結果：就是預設字體~通常不需要特別寫出來 */
font-weight:lighter;　/* 結果：比預設厚度更細 */
font-weight:bold;　/* 結果：一般的粗體 */
font-weight:bolder;　/* 結果：比一般的粗體還要更粗一些 */
font-weight:900;　/* 結果：厚度900 ((數值可自訂)) */

weight數值從100-900可自訂；400=normal、700=bold

因為我個版設定字體粗體～所以不再設定字體粗細結果給大家參考
因為設定了你們也看不出來，就在自己的個版ＣＳＳ試試看吧!!

文字大、小寫的樣式與結果

text-transform:capitalize;　/* 英文字首全自動轉換成大寫abcde */
text-transform:lowercase;　/* 英文字全自動轉換成小寫abcde */
text-transform:uppercase;　/* 英文字全自動轉換成大寫abcde */

其他的字體屬性與樣式

font-style:italic;　/* 文字斜體 */
letter-spacing:1px;　/* 字體間的距離 */
line-height:28px;　/* 設定行高 */
text-align:right;　/* 文字靠右對齊 */
text-align:left;　/* 文字靠左對齊 */
text-align:center;　/* 文字置中對齊 */
text-align:justify;　/* 文字分散對齊 */
vertical-align:text-top;　/* 文字垂直向上對齊 */
vertical-align:text-bottom;　/* 文字垂直向下對齊 */
vertical-align:text-center;　/* 文字垂直置中對齊 */
text-decoration:overline;　/* 加上頂線 */
text-decoration:underline;　/* 加上底線 */
text-decoration:line-through;　/* ~~加上刪除線~~ */
vertical-align:super;　/* 上標字 */
vertical-align:sub;　/* 下標字 */