前言

系列文章目录：

[目录]HTML CSS JS

根据视频和PPT整理

视频及对应资料：

HTML CSS
老师笔记： https://gitee.com/xiaoqiang001/html_css_material.git

视频：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程

视频对应资源

链接：【https://pan.baidu.com/s/1k1dpC6iGA93c6gVsUvPqYw】

提取码：1234

【GitHub 仓库链接】

文章目录

前言

1 字体系列

2 字体大小

3 字体粗细

4 文字样式

5 字体复合属性

6 字体属性总结

CSS Fonts (字体)属性用于定义字体系列、大小、粗细、和文字样式（如斜体）

1 字体系列

CSS 使用 font-family 属性定义文本的字体系列。可以设置一种或多种字体。

各种字体之间必须使用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号.
尽量使用系统默认自带字体，保证在任何用户的浏览器中都能正确显示
最常见的几个字体：body {font-family: ‘Microsoft YaHei’,tahoma,arial,‘Hiragino Sans GB’; }

<!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><style>h1 {font-family: 'Courier New', Courier, monospace;}</style>
</head>
<body><h1>字体系列 font-family</h1>
</body>
</html>

font-family: ‘Courier New’, Courier, monospace;
电脑浏览器中有 ‘Courier New’ 字体就使用该字体，没有则使用 Courier ，再没有使用 monospace，都没有就是要电脑浏览器默认的字体

2 字体大小

CSS 使用 font-size 属性定义字体大小

<!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><style>p {font-size: 16px;}</style>
</head>
<body><h1>字体大小</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</div>
</body>
</html>

px（像素）大小是我们网页的最常用的单位
谷歌浏览器默认的文字大小为16px
不同浏览器可能默认显示的字号大小不一致，我们尽量给一个明确值大小，不要默认大小
可以给 body 指定整个页面文字的大小

<!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><style>body {font-size: 20px;}</style>
</head>
<body><h1>字体大小</h1><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</p><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, quas similique dicta est odit expedita, facere unde sequi voluptates magni, quisquam beatae. Tempore numquam animi esse voluptates optio molestiae quasi?</div>
</body>
</html>

会发现通过给body设置字体大小来设置整个页面的字体大小，h1 的字体大小并没有发生改变

标题标签比较特殊,需要单独指定文字大小

  <style>body {font-size: 20px;}h1 {font-size: 20px;}</style>

3 字体粗细

CSS 使用 font-weight 属性设置文本字体的粗细。

font-weight 的取值：

normal：文字正常粗细
bold：文字加粗
bolder：文字特粗(效果不是很明显)
lighter：文字细体(效果不是很明显)
数值：100、200、300、400(等价于normal)、500、600、700(等价于bold)、800、900

400 以下细体，700以上特粗。
默认值：normal

注意：

数值后面不要带单位
实际开发时，我们更喜欢用数字表示粗细

<!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><style>.normal {font-weight: normal;}.bold {font-weight: bold;}.bolder {font-weight: bolder;}.lighter {font-weight: lighter;}.one {font-weight: 100;}.two {font-weight: 200;}.three {font-weight: 300;}.four {font-weight: 400;}.five {font-weight: 500;}.six {font-weight: 600;}.seven {font-weight: 700;}.eight {font-weight: 800;}.nine {font-weight: 900;}</style>
</head>
<body><p class="normal">文字正常粗细</p><p class="bold">文字加粗</p><p class="bolder">文字特细</p><p class="lighter">文字细体</p><p class="one">文字 100</p><p class="two">文字 200</p><p class="three">文字 300</p><p class="four">文字 400</p><p class="five">文字 500</p><p class="six">文字 600</p><p class="seven">文字 700</p><p class="eight">文字 800</p><p class="nine">文字 900</p>
</body>
</html>

把本来加粗的文本设置为正常出细

  <h1 class="h1-normal">文章标题</h1><h1>文章标题-未加粗</h1>

    .h1-normal {font-weight: normal;/* 或 *//* font-weight: 400; */}

4 文字样式

CSS 使用 font-style 属性设置文本的风格。

font-style取值：

normal：文本字体样式为正常的字体。
italic：文本字体样式为斜体。

默认值：normal

<body><p class="normal">正常样式的字体</p><p class="italic">斜体样式的字体</p>
</body>

  <style>.normal {font-style: normal;}.italic {font-style: italic;}</style>

注意：
平时我们很少给文字加斜体，反而要给斜体标签（em，i）改为不倾斜字体。

  <em class="normal">倾斜的文本改为正常样式的字体</em><i class="normal">倾斜的文本改为正常样式的字体</i>

    .normal {font-style: normal;}

5 字体复合属性

字体属性可以把以上文字样式综合来写, 这样可以更节约代码（行数更少）

使用 font 属性可以把以上文字样式综合来写

使用 font 属性时，必须按语法格式中的顺序书写，不能更换顺序，并且各个属性间以空格隔开

font: font-style font-weight font-size/line-height font-family;

font-style：文字样式
font-weight：文字粗细
font-size：文字大小
line-height：文字行高
font-family：文字字体

其中，不想设置的属性可以省略不写，但必须保留 font-size 和 font-family 属性，否则 font 属性将不起作用

<body><div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Placeat quas magni molestias molestiae praesentium quo dolor ullam odio nulla! Dicta quos asperiores ducimus eligendi doloremque fugiat dolorum aperiam earum nulla?</div><p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Amet quam quod porro in consequuntur at fugiat debitis, consequatur dolores facere! Quia aliquam recusandae tenetur, quam natus libero quaerat impedit rerum?</p><span>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem animi sunt fuga enim temporibus tempore, optio unde quos eligendi. Laboriosam, maxime consequuntur dolore non itaque officiis maiores magnam rerum voluptatibus.</span>
</body>

  <style>div {font: italic 700 20px '微软雅黑';}p {font: italic 700;}h4 {font: italic 20px 700 '微软雅黑';}</style>

6 字体属性总结

[CSS]CSS 字体属性相关推荐

CSS Fonts字体属性
CSS Fonts(字体)属性 CSS Fonts(字体)属性用于定义字体系列.大小.粗细.和文字样式(如斜体) 一.CSS使用font-family属性定义文本的字体系列 h2 {font-fami ...
html css 文本字体属性详解
文本.字体属性文本属性 color 为字体颜色 font-style 用于打开和关闭斜体文本 font-weight 为字体设置粗细程度 font-size 为文字指定大小 font-family ...
CSS之字体属性的设置
1.font-famaily---------设置字体语法:font-family:"字体1","字体2" 2.font-size--------设置字号 f ...
从零开始学前端：CSS字体属性和文本属性 --- 今天你学习了吗？（CSS：Day08）
从零开始学前端:程序猿小白也可以完全掌握!-今天你学习了吗?(CSS) 复习:从零开始学前端:CSS引入 - 今天你学习了吗?(CSS:Day07) 文章目录从零开始学前端:程序猿小白也可以完全掌握 ...
CSS字体属性与文本属性详解
文章目录 1. CSS字体属性 1.1 字体系列 1.2 字体大小 1.3 字体粗细 1.4 字体样式 1.5 字体复合属性 1.6 字体属性总结 2. CSS文本属性 2.1 文本颜色 2.2 对齐 ...
CSS -- CSS字体及文本属性设置总结
文章目录 1 CSS字体属性 1.1 字体系列 1.2 字体大小 1.3 字体粗细 1.4 文字样式 1.5 字体复合属性 1.6 字体属性总结 2 CSS文本属性 2.1 文本颜色 2.2 对齐文本 ...
第三章——字体属性，字号、字体、字体粗细、字体样式、字体连写
文章目录 3.1 常见字体系列 3.2 字体系列/字体类型 3.3 字体大小 3.5 字体粗细 3.6 文字样式 3.7 字体复合属性字体属性总结属性 font-size 字号单位为px像素,一 ...
CSS中的字体属性和使用
CSS字体属性: 定义字体的大小,字体系列,粗细和文字样式等: (1)font-family p {font-family: "微软雅黑":} div {font-family; ...
CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考黑马程序员pink老师前端入门教程如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
前端：CSS/09/行内框架，CSS简介，CSS选择器，组合选择器，CSS注释，CSS尺寸属性，CSS字体属性，CSS文本属性
内嵌框架(行内框架,浮动框架) 语法格式:<iframe 属性="值">不支持时的提示信息</iframe> 描述:内嵌框架,相当于在现有的网页中,挖了一个 ...

[CSS]CSS 字体属性

前言

文章目录