iT邦幫忙

2025 iThome 鐵人賽

DAY 10
0
Modern Web

從骨架到靈魂:網頁構成三部曲系列 第 10

Day -10 CSS的文字樣式

  • 分享至 

  • xImage
  •  

為什麼需要 CSS呢?

CSS是網頁的造型師且能夠讓我們能夠精準地控制文字的每一個細節,CSS又稱層疊樣式表,從字體、大小、顏色到間距和裝飾,打造出兼具美感與易讀性的網頁內容,CSS不能單獨使用,必須與HTML或XML一起協同工作,這次會說明CSS的文字樣式中的字形,字形大小和斜體還有字體粗細最後則是字母大小寫~

文字樣式

1.字型

格式:{font-family:字型1、字型2...}可以使用一種以上字體,字體可以用「,」分開
範例:font-family: "BiauKai", "標楷體", serif;

https://ithelp.ithome.com.tw/upload/images/20250919/20178756NsWG21Aydn.png

2.字體大小

格式:{font-size;} px(像素)為常用單位,用來決定字體大小,也可以使用相對大小像是larger或者small
範例:font-size: large;
https://ithelp.ithome.com.tw/upload/images/20250919/2017875605DqLAveRg.png

3.斜體

格式:{font-style} 有三個值 Normal為預設值 Italic為斜體 Oblique也是斜體一種
範例: font-style: italic
https://ithelp.ithome.com.tw/upload/images/20250919/20178756OfaaFhOzOa.png

4.字體粗細

格式:{font-weight} 常用值有 normal (標準)、bold (粗體)數值為700、bolder(原本字體數值加100) 數值範圍由細到粗為100~900
範例:font-weight: bold
https://ithelp.ithome.com.tw/upload/images/20250919/201787560QXqJC4xx0.png

5.字母大小寫

格式:{font-variant} 如果想要小寫字母轉成字體較小的大寫字母則是可以使用small-caps
範例:font-variant: small-caps
https://ithelp.ithome.com.tw/upload/images/20250919/20178756jMyjobWbYF.png


上一篇
Day - 09HTML認識div標記和span&使用註解
下一篇
Day- 11 CSS文字段落
系列文
從骨架到靈魂:網頁構成三部曲11
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言