re:从0开始的CSS学习之路 6. 字体相关属性

1. 字体相关属性

  1. font-size 字体大小

  2. font-family 字体的系列(字体簇)

    可以设置多个字体,每个字体之间以逗号隔开

    设置多个字体的目的是为了用户尽可能的支持字体

    网页字体的五大类:
    serif 衬线字体
    sans-serif 非衬线字体
    monospace 等宽字体
    cursive 草书字体
    fantasy 虚幻字体

    若字体名称中包含空格,则必须使用双引号

  3. font-weight 字体的粗细

    可选值:
    normal 正常显示(默认值)
    bold 粗体
    lighter 特细
    bolder 特粗
    "number" 利用数值指定粗细 100-900,值后没有单位

    400相当于normal 700相当于bold

  4. font-style 字体的样式

    可选值:
    normal 正常显示
    italic 斜体

    通常斜体使用相对较少,反而将斜体设置成normal

字体的简写属性:font,使用一个font属性设置所有的相关属性
font:font-style font-weight font-size/line-height font-family

注意:

  1. 每个属性之间以空格隔开
  2. font-size font-family 不可以省略并且必须按照顺序书写,其他可以省略

示例如下:

html 复制代码
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	h1 {
		font-size: 80px;
		font-family: monospace;
	}
	
	p {
		/* font-size: 30px;
		font-family: serif;
		font-weight: bolder;
		font-style: italic; */
		font: italic bolder 80px serif;
	}
</head>

<body>
	<h1>天天好心情 I'M happy</h1>
	<p>今天天气不错</p>
	<p>挺风和日丽的</p>
	<p>我们今天在上课</p>
	<p>我心情挺好的</p>
</body>

</html>
相关推荐
卓伊凡3 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
做科研的周师兄4 分钟前
【机器学习入门】7.4 随机森林:一文吃透随机森林——从原理到核心特点
人工智能·学习·算法·随机森林·机器学习·支持向量机·数据挖掘
笨笨鸟慢慢飞5 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu8 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu8 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu9 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js
fruge11 分钟前
从 0 到 1 理解前端工程化:图表化解析核心逻辑
前端
LuckySusu11 分钟前
【vue篇】技术分析:Template 与 JSX 的本质区别与选型指南
前端·vue.js
BestStarLi16 分钟前
个人写码感悟:TailwindCSS不要忽视子选择器
前端
_大学牲18 分钟前
Flutter 之魂 GetX🔥(三)深入掌握依赖管理
前端·flutter