CSS —— 字体和文本样式

字体样式

字体大小

属性名： font-size

取值：数字+px

注意点：

谷歌浏览器默认文字大小是16px
单位需要设置，否则无效

字体粗细

属性名：font-width

取值：

关键字

正常	margin
加粗	bold

纯数字：100 - 900的整百数

正常	400
加粗	700

注意点

不是所有字体都提供了九种粗细，因此部分取值页面中无效
实际开发中以：正常、加粗两种取值使用最多

字体样式（是否倾斜）

属性名：font-style

取值：

正常（默认值）：normal
倾斜：italic

字体系列 font-family

属性名：font-family

常见取值：具体字体1，具体字体2，具体字体3，具体字体4....，字体系列

具体字体：Microsft YaHei，微软雅黑，黑体，宋体，楷体等
字体系列：sans-serif，serif，monospace等

渲染规则：

从左往右按照顺序查找，如果电脑中未安装该字体，则提示显示下一个字体
如果都不支持，此时会根据操作系统，显示最后字体系列的默认字体

注意点：

如果字体名称中存在个单词，推荐使用引号包裹
最后一项字体系列不需要引号包裹
网页开发时，尽量使用系统常见自带字体，保证不同用户浏览网页都可以正确显示

系统	默认字体
Windows	微软雅黑
macOS	苹方

常见字体系列

无衬线字体（ sans-serif ）：

特点：文字笔画粗细均匀，并且首尾无装饰
场景：网页中大多采用无衬线字体
常见该系列字体：黑体，Arial

衬线字体（ serif ）：

特点：文字笔画粗细不均，并且首尾有笔锋装饰
场景：报刊书籍中应用广泛
常见该系列字体：宋体，Times New Roman

等宽字体：

特点：每个文字或字母宽度相同
场景：一般用于程序代码编写，有利于代码的阅读和编写
常见该系列字体，Consolas、fira code

样式的层叠问题

如果给同一个标签设置了相同属性，此时样式会层叠（覆盖），写在最下面的生效

所谓的层叠即是覆盖的意思，表示样式可以一层一层的层叠覆盖

字体font相关属性的连写

属性名：font（复合属性）

取值：

font：style size weight family；

省略要求

只能省略前两个，如果省略了相当于设置了默认值

注意点：如果需要同时设置单独和连写形式

要么把单独的额样式写在连写下面

要么把单独的样式写在连写里面

CSS —— 字体和文本样式相关推荐

HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
4.CSS -- 字体及文本样式
字体及文本样式 1.文本属性 1.1 颜色属性 1.1.1 取值: 1.1.1.1 英文单词 1.1.1.2 rgb 1.1.1.3 rgba 1.1.1.4 十六进制 1.2 `font-style ...
CSS字体、文本样式
字体样式 front-family 字体类型 front-size 字体大小 front-weight 字体粗细 front-style 字体风格文本样式颜色 color rgb(颜色) R ...
HTMLCSS Day03 CSS字体及文本样式
文章目录 1.文本属性 - 颜色属性在CSS中如何通过color属性来修改文字颜色英文单词 rgb rgba 十六进制 - font-style 用于打开和关闭斜体文本 - font-weight ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
05使用CSS设置字体和文本样式
使用CSS设置字体和文本样式: 1.定义字体类型font-family 用法: font-family:name; font-family:ncursive|fantasy|monospace|ser ...
【前端学习笔记】(三)（CSS基础、选择器、字体和文本样式）
目录一.基础认知 1.1 CSS介绍 1.2 CSS语法规则 1.3 CSS常见属性 1.4 CSS引入方式 1.5 CSS常见三种引入方式的区别二.基础选择器 1.标签选择器 2.类选择器 3. ...
CSS基础：基础选择器、字体和文本样式
CSS基础 Date: August 31, 2022 Summary: 基础选择器.字体和文本样式基础认知学习路径: CSS初识 CSS引入方式 CSS初识 CSS介绍 CSS:层叠样式表(Ca ...
css笔记一-CSS简介、基础选择器、字体和文本样式
一一.CSS简介 1.1.什么是CSS? CSS(Cascading style sheets):层叠样式表 CSS作用:给页面中的HTML标签设置样式 1.2.CSS语法规则写在哪里? css写 ...