Day7｜CSS文字相關の筆記

2022 iThome 鐵人賽

DAY 7

Modern Web

從零轉生第一天先學前端系列第 7 篇

14th鐵人賽

Aliang

團隊來啊!打摳啊!

2022-09-11 19:37:23

1427 瀏覽

分享至

CSS字體

CSS中有五個通用字體系列 :
1.襯線字體 Serif - 字母邊緣有小筆畫
2.無襯線字體 sans-serif - 乾淨的線條
3.等寬字體 Monospaced - 所有字母相同固定寬度
4.草書字 cursive - 模仿人類筆跡
5.幻想字 Fantasy - 裝飾/俏皮的字體
使用 font-family: "Times New Roman", Times, serif; 指定字型
- 應包含多個字體做'備用'

以下為W3C推薦網路通用的安全字型
Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)

引用google開源字體 https://fonts.google.com/about
- 在<head>中，插入<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=填寫要使用的字型">
- 有多種字型要引入，使用|隔開 (注意太多字體會影響網頁速度
- 可使用以下css各種樣式效果
font-size 文字大小
- 預設字體大小為 16px = 1em
- 可分為絕對尺寸、相對尺寸
- 單位有px、em、rm、vw...
font-style 主要指定文本為斜體

font-style: normal; 正常顯示
font-style: italic; 斜體顯示
font-style: oblique; 傾斜顯示

font-weight 指定字體的粗細

font-weight: normal; 普通
font-weight: bold; 粗體

font-variant: small-caps; 指定字體為小型大寫體

CSS文本相關屬性

修改元件顏色 color: blue;
填充元件容器的底色background-color

CSS對齊屬性

text-align 設定文本、元素內的元件水平對齊

text-align: center; 文字置中
text-align: left; 文字置左 (預設)
text-align: right; 文字置右
text-align: justify; 以距邊框，等寬分配單字字距

text-align-last 一段文字中，指定最後一段文字的排版方式
- unicode-bidi: bidi-override; 文字鏡向翻轉
vertical-align 設置元素的垂直對齊 ( 像是調整圖片對齊文本的關係 )
- 只適用於行內元素 inline element

vertical-align: baseline; (預設)元素對齊父元素基線上
vertical-align: middle; 放置父元素的中部 ( 
vertical-align: text-top; 把元素的頂端與父元素字體的頂端對齊
vertical-align: text-bottom; 元素的頂端與行中最低的元素的頂端對齊
vertical-align: sub; 垂直對齊文本的下標
vertical-align: super; 垂直對齊文本的上標
//全局屬性//
vertical-align: inherit; 從父元素繼承 vertical-align 屬性的值
vertical-align: initial; 設置屬性的初始值

CSS文字裝飾屬性

text-decoration: overline; 上標線
text-decoration: line-through; 刪除線
text-decoration: underline; 下底線
text-decoration: overline underline; 文本上下都加線
text-decoration-color: red; 設定線條顏色
text-decoration-style 設定線條樣式(虛線、波浪線、點點、雙線
text-decoration-thickness: 5px; 設定線條粗細

text-decoration屬性是以下的簡寫屬性

text-decoration-line（必需的）
text-decoration-color（可選的）
text-decoration-style（可選的）
text-decoration-thickness（可選的）
<!--可以寫成-->
text-decoration: underline red double 5px;
text-decoration: 樣式 顏色 線條的樣式 粗細;

連結預設都有下劃線，可用 text-decoration: none; 刪除下劃線。

text-transform 指定文本內的英文大小寫
text-transform: uppercase; 第一個英文字母大寫
text-transform: lowercase; 所有英文單字都小寫
text-transform: capitalize; 所有英文單字都大寫

CSS文本排版方式

text-indent: 50px;文本第一行的縮排
letter-spacing: 5px; 指定字距，可使用複數
line-height: 0.8; 指定行距
word-spacing: 10px; 指定文本中單詞之間
white-space: nowrap; 禁止換行

CSS文字陰影

text-shadow屬性為文本添加陰影

text-shadow: 2px 2px 5px red; 
數值順序為水平陰影+垂直陰影+模糊效果+顏色

CSS字體屬性簡寫

使用font屬性簡寫以下屬性 :

font-style
font-variant
font-weight
font-size/line-height (必需)
font-family (必需)

舉例 : font: italic small-caps bold 12px/30px Georgia, serif;

CSS icon 介紹

Font Awesome

可以透過添加icon資料庫，簡單使用icon，且icon可縮放大小、使用css等...
在 <head> 中加入 <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script> 即可使用

Bootstrap icon