在<body>設定網頁字體基本樣式
body{
font-size:62.5%; /* 62.5% * 16px(瀏覽器預設) = 10px */
line-height:1.5; /* 本身字級的1.5倍 */
font-family:Microsoft JhengHei,Arial, Helvetica, sans-serif;
} 縮寫可寫成 font:62.5% / 1.5 Microsoft JhengHei,Arial, Helvetica, sans-serif;
其完整的CSS屬性如下
font: font-style font-variant font-weight font-size / line-height font-family;
h1{
font-size:240%;
}
h2{
font-size:1.8em;
}
p{
font-size:1.5em;
}
基本單位會以10px作計算, 因此
h1標題字 240% * 10px = 24px
h2標題字 1.8 * 10px = 18px
p 1.5 * 10px = 15px
(1em = 一個基本單位 )
建議用％或em而不用px
因為只要我將基本單位作調整, 例如改為75%, 基本單位重新以12px作計算, 上述的h1、h2、p也會一併相對作調整, 因此用百分比或em來作設定, 是非常彈性的設定方式
另外
line-height:1.5; 為何不用 px 或 em 、%
因為設定了 px 或 em 、%
會以基本單位作為統一基準計算 而造成標題字行距過擠的狀況
無單位的寫法會依各自的字大小作倍率換算
字型部份, 繁體部份多一個微軟正黑體可以使用,
英文 Microsoft JhengHei
----------------------------------------------------------------------------------------------------------------------------------
font-size 字體尺寸設定分為絕對大小、相對大小、高度、百分比
1.絕對大小
一般瀏覽器預設為 medium(12pt=16px) 計算 一級約差1.2倍 為固定值 無繼承xxlarge | xlarge | large | medium | small | xsmall | xxsmall
2.相對大小
有larger及smaller兩種,假設父元素為mediumlarger = 絕對大小的large ,smaller = 絕對大小的small
3.高度
又分em、ex、px ｜ in、cm、mm、pt、pc （後五種為印刷單位）1em = 1各基本單位
1ex = 1各基本單位（取小寫高度）
4.百分比
沒有留言:
張貼留言