文字大小及字體是我們在網頁中最常設定跟調整的，在預設的字體中你可能找不到你想要的字體類型，這時候我們可以利用Google font去看看你想要的字體。當然也可以調整你要的語言!
點進去你要的字體後，按下select this style，右邊會挑出來它的連結，跟CSS
用法。以下是例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@900&display=swap"
rel="stylesheet"
>
<style>
h1{
font-family: 'Noto Sans TC', sans-serif;
}
</style>
</head>
<body>
<div>
<h1>標題</h1>
<div><a href="#">超連結</a></div>
<img src="https://picsum.photos/id/237/200/300" alt="">
<p>我的內容我的內容我的內容</p>
</div>
</body>
</html>
記得一定要link喔!不然是會沒有效果的。
這樣就能成功的改變你的標題字體!另外字體大小也可以調整。要用到的是font-size這個屬性。而改變字體的樣式就是上面所教的font-family
h1{
font-size: 20px;
font-family: 'Noto Sans TC', sans-serif;
}
px是指像素那要如何知道像素的大小呢?這邊有個實用的小工具!
那就是像素尺!剛接觸網頁的話對像素大小可能會沒什麼概念，這時候就用尺量八!
Screen Ruler是我目前在用的像素尺，安裝完後就可以來量囉!
這邊可以看到我設定的font-size是20px，所以一個字的寬高都會是20像素，不信的話趕快動手下載驗證一下吧!
iThome鐵人賽
看影片追技術