使用Goole fonts
首先，我們在google fonts上選擇一個我們心儀的字體，我們選擇是這樣的字體：
<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=Inter:wght@400;500;700&display=swap" rel="stylesheet">在我們的網站中引入google的字體
然後全局使用字體，默認字體還是為sans-serif
body { 'Inter', sans-serif;}之後我們就看到了我們想要的好看的字體：
字體大小和距離
首先我們設置一下標題
字體大小
h1 { margin-bottom: 24px; font-size: 44px;}在調試字體大小的時候，我們可以使用工具（https://typescale.com/）去體驗一下，接著我們可以通過嘗試性去看看效果
字體豎向間距
h1 { margin-bottom: 24px; font-size: 44px; line-height: 1.1;}< /code>選擇間距的時候，盡量不要太大，然後可以通過瀏覽器調試，按住ALT+上下來慢慢調試成你想要的樣子；
字體橫向間距
h1 { margin-bottom: 24px; font-size: 44px; line-height: 1.1; letter-spacing : -1px;}
接著我們來設置標題文本的字體
按照上面同樣的方式：
.header-text { margin-bottom: 24px; font-size: 18px; line-height: 1.6;}
設置h2的標題字體
h2 { margin-bottom: 48px; font-size: 36px; letter-spacing: -0.5px;}
之後再調整一下其他的字體
全部的CSS代碼如下
/*SPACING SYSTEM (px)2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128FONT SIZE SYSTEM (px)10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98*/* { margin: 0; padding: 0; box-sizing: border-box;}/* ------- ----------------- *//* GENERAL STYLES *//* ----------------------- - */body { 'Inter', sans-serif;}.container { width: 960px; margin: 0 auto;}header,section { margin-bottom: 48px;}h2 { margin-bottom: 48px; font-size: 36px; letter-spacing: -0.5px;}.grid-3-cols { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 80px;}/* ------ ------------------ *//* COMPONENT STYLES *//* ---------------------- -- *//* HEADER */header { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 80px; margin-top: 48px;}.header-text-box { align- self: center;}h1 { margin-bottom: 24px; font-size: 44px; line-height: 1.1; letter-spacing: -1px;}.header-text { margin-bottom: 24px; font-size: 18px; line-height: 1.7;}img { width: 100%;}/* FEATURES */.features-icon {}.features-title { margin-bottom: 16px; font-size: 20px;}.features-text { font -size: 18px; list-style: 1.7;}/* TESTIMONIAL */.testimonial-section {}.testimonial-box { grid-column: 2 / -1; align-self: center;}.testimonial-box h2 { margin-bottom: 24px; font-size: 24px;}.testimonial-text { font-style: italic; margin-bottom: 24px; font-size: 18px; list-style: 1.7;}/* CHAIRS */.chair -box { padding: 24px;}h3 { margin-bottom: 24px; font-size: 20px;}.chair-details { list-style: none; margin-bottom: 24px;}.chair-details li { display: flex ; align-items: center; gap: 12px; margin-bottom: 24px;}.chair-details li:last-child { margin-bottom: 0;}.chair-icon {}.chair-price { display: flex; justify-content: space-between; font-size: 20px;}footer { margin-bottom: 48px; font-size: 14px;}文章為用戶上傳，僅供非商業瀏覽。發布者：Lomu，轉轉請註明出處： https://www.daogebangong.com/zh-Hant/articles/detail/Web%20font%20typography%20practice.html
支付宝扫一扫 
评论列表（196条）
测试