Day12 CSS基础设定介绍_1

文字及字体

文字大小及字体是我们在网页中最常设定跟调整的,在预设的字体中你可能找不到你想要的字体类型,这时候我们可以利用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像素,不信的话赶快动手下载验证一下吧!


<<:  [13th][Day16] tamplete

>>:  [Day 13] Sass - Maps

# Day 16 Physical Memory Model(一)

从前几篇文章可以看得出来,笔者对於 kernel mm subsystem 其实很不熟悉啊! 决定调...

Day3 NodeJS-Module、Exports与Require

今天要谈三个NodeJS的概念,进入新手村的第一个任务:Module、Exports与Require...

DAY14: HTPP服务器:Respone对象

在Day13: HTTP这篇的范例中很常看到使用respone对象,而respone对象就是Seve...

React Native 优缺点,如果现在开始做会选哪个

我们因为只有一个工程师,做 App 的话跨平台开发是很自然的选项。 在2018年开发时,当初只有 R...

Day14-seaborn(2)直方图histplot、散布图jointplot

直方图 直方图与上一篇所介绍长条图差别在哪里呢? 直方图通常用来观察连续性资料对於相同属性值的呈现结...