3.13 文字樣式 font-size 文字大小
單位介紹:
html:
Copy <!doctype html>
<html>
<head>
</head>
<body>
<div class="text1">
文字1
<div class="text2">文字2</div>
</div>
</body>
</html>
css:
Copy html {
font-size : 10 px ;
/* 或 font-size: 62.5%; */
}
div .text1 {
font-size : 2 rem ; /* 相較於根元素,結果:20px */
}
div .text2 {
font-size : 2 em ; /* 相較於父元素,結果:40px */
/* font-size: 200%; */
}
範例:
若將 em 單位用在其它 css 屬性,例如圓角(border-radius),那就是直接看該元素的文字大小。
Copy < div class = "block" >
這是 div 的文字
< p >這是段落的文字</ p >
</ div >
Copy div .block {
border : 1 px solid black ;
}
div .block p {
border : 3 px solid red ;
height : 100 px ;
font-size : 30 px ;
/* border-radius: 15px; */
/* 上面這行,也可以改成寫以下這行 */
border-radius : .5 em ; /* 此元素的文字大小:30px * 0.5 */
}
例:
font-weight 文字粗體
文字粗體,值有 100、200、300、400(normal)
、500、600、700(bold)
、800、900。並不是設定就有效,甚至其實看不太出來,常用的只有 normal
及 bold
。其它要看字體本身有沒有支援。
範例:
font-style 字體樣式
可選的值有:normal
和 italic
。
normal
是預設狀態,即一般字體;italic
會呈現斜體。
範例:
text-decoration 文字畫線
可選的值有:
其它用法:
如果是 underline
的時候,可以設定 text-underline-offset
來指定拉開的距離。
text-transform 英文字大小寫
這主要是用在英文字母才會有效。可選的值有:
capitalize:每個英文單字首字母強制大寫。
text-align 文字水平對齊
可選的值有:
text-indent 首行縮排
預設值為 0。可設定首行縮排,例:
line-height 文字行高
指定倍數或固定單位,建議用倍數觀念來指定。
white-space 關於空格
該如何處理元素內的空白字元。
常用的有以下:
normal:預設值,連續的空白字元會被合併(collapse)。
pre:連續的空白字元(包含斷行)都會被保留。(註:在 code pen 上實測此屬性值不太正確,因為沒有保留空白字元。)
word-break 文字斷行
中文字比較沒有這個問題,英文字就會有問題,常見可設定的有:
當文字內容是網址的時候,可能會遇到超出去的問題,例:
color 文字顏色
關鍵字
16進位
rgba 或 rgb
a:alpha 不透明度,0 ~ 1 的小數,1 為完全不透明,0 為完全透明。
Copy p {
color : rgb (100 , 255 , 100) ;
/* 或 */
color : rgba (100 , 255 , 100 , 1) ;
}
hsla 或 hsl
s:Saturation 飽合度。0% ~ 100%,一個顏色若飽合度愈高,愈接近純色;一個顏色若飽合度低,就愈接近灰色。
l:Lightness 亮度。0% ~ 100%,一個顏色若沒有亮度,就會是黑色;一個顏色若亮度最高,就是白色。
a:Alpha 不透明度。0 ~ 1 的小數,1 為完全不透明,0 為完全透明。
範例:
font-family 指定字體
全站通用
一般是直接針對 body 標籤來設定:
Copy body {
font-family : "微軟正黑體" , "BiauKai" , "helvetica" ;
}
以上述為例,瀏覽器會優先用「微軟正黑體」,如果電腦沒有這個字體,就繼續往後找,下一個是「BiauKai」(標楷體),如果有,就使用這個字體。依此類推。
情況:英文字套用 helvetica
,中文字套用 BiauKai
:
Copy body {
font-family : "helvetica" , "BiauKai" ;
}
有些字體例如 BiauKai
這個字體中英文都有;然而 helvetica 只有英文字體。那以此情況為例的話,英文字就會套用 helvetica
字體,中文就會套用 BiauKai
字體。
針對特定元素
如果需要特別針對某元素,那就直接針對該元素去指定字體即可:
Copy p .para1 {
font-family : "helvetica" ;
}
襯線體、無襯線體
Copy p .para1 {
font-family : serif ; /* 襯線體 */
}
Copy p .para1 {
font-family : sans-serif ; /* 無襯線體 */
}
@font-face 字體檔自行載入
網頁上的字體檔副檔名,儘可能使用 woff
或 woff2
字體,較輕量,WOFF 說明文件參考 。
透過 CSS 的 @font-face
,就可以使用自己的字體檔:
Copy @font-face {
font-family : "myFontLight" ; /* 自訂名稱 */
src : url ( "./fonts/xxx.woff2" ) ; /* 字體檔路徑 */
}
@font-face {
font-family : "myFontBold" ;
src : url ( "./fonts/xxx.woff2" ) ;
}
語法示意:
Copy <!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="utf-8">
<title>測試字體</title>
<style>
@font-face{
font-family: "myFontLight";
src: url("./fonts/xxx.woff2");
}
@font-face {
font-family: "myFontBold";
src: url("./fonts/xxx.woff2");
}
p.para{
font-family: "myFontLight";
}
p.para2{
font-family: "myFontBold";
}
</style>
</head>
<body>
</body>
</html>
font-display 決定字體載入方式
可設定的有以下,記 swap 即可:
auto:由瀏覽器自行決定,通常會與 block 相同。
block:在字型未載入完全時,會有一部份的時間會由佔位空間留白,等到字型快載入完成時,出現預設字型,字型載入完成時,再一次替換。
swap :(結論用這個) 。先出現預設的字型,然後字型邊下載邊替換。
fallback:先顯示預設字型,當字型載入完畢後,再一次替換,但如果下載時間過長的話(3秒為限),就不會替換。
optional:會依照使用者的網路狀況,當網路速度太慢時,則直接使用預設的字型為主。
故 @font-face
裡以後都寫類似這樣:
Copy @font-face {
font-family : "myFontLight" ;
src : url ( "./fonts/xxx.woff2" ) ;
font-display : swap ;
}
@font-face {
font-family : "myFontBold" ;
src : url ( "./fonts/xxx.woff2" ) ;
font-display : swap ;
}
其它資源
Google Fonts
例:請在 practice
資料夾下,建立 font.html
檔案,貼以下的程式:
Copy <! DOCTYPE html >
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< title >Document</ title >
<!-- 以下三行是從 Google Fonts 選的 Borel 字體,貼過來的 -->
<!-- 網址是: https://fonts.google.com/specimen/Borel?category=Handwriting -->
< link rel = "preconnect" href = "https://fonts.googleapis.com" >
< link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin >
< link href = "https://fonts.googleapis.com/css2?family=Borel&display=swap" rel = "stylesheet" >
< style >
p .para {
font-family : "Borel" ;
}
</ style >
</ head >
< body >
< p >Whereas disregard and contempt for human rights have resulted</ p >
< p class = "para" >Whereas disregard and contempt for human rights have resulted</ p >
</ body >
</ html >