字体

字体的样式

font-size(用来设置文字所占框的大小)

设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小，
在页面中，每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度，并不是字体的大小
一般情况下文字都要比这个格要小一些，也有时会比格大，
根据字体的不同，显示效果也不同

font-family （指定文字字体）

通过font-family可以指定文字的字体
* 当采用某种字体时，如果浏览器支持则使用该字体，
* 如果字体不支持，则使用默认字体
* 该样式可以同时指定多个字体，多个字体之间使用,分开
* 当采用多个字体时，浏览器会优先使用前边的字体，
* 如果前边没有在尝试下一个

浏览器使用的字体默认就是计算机中的字体，
* 如果计算机中有，则使用，如果没有就不用
*
* 在开发中，如果字体太奇怪，用的太少了，尽量不要使用，
* 有可能用户的电脑没有，就不能达到想要的效果。

font-style（）

font-style可以用来设置文字的斜体
* - 可选值：
* normal，默认值，文字正常显示
* italic 文字会以斜体显示
* oblique 文字会以倾斜的效果显示
* - 大部分浏览器都不会对倾斜和斜体做区分，
* 也就是说我们设置italic和oblique它们的效果往往是一样的
* - 一般我们只会使用italic

font-weight

font-weight可以用来设置文本的加粗效果：
* 可选值：
* normal，默认值，文字正常显示
* bold，文字加粗显示
*
* 该样式也可以指定100-900之间的9个值，
* 但是由于用户的计算机往往没有这么多级别的字体，所以达到我们想要的效果
* 也就是200有可能比100粗，300有可能比200粗，但是也可能是一样的

font-variant

font-variant可以用来设置小型大写字母
* 可选值：
* normal，默认值，文字正常显示
* small-caps 文本以小型大写字母显示
*
* 小型大写字母：
* 将所有的字母都以大写形式显示，但是小写字母的大写，
* 要比大写字母的大小小一些。

在网页中将字体分成5大类：

serif（衬线字体）
sans-serif（非衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
可以将字体设置为这些大的分类,当设置为大的分类以后，
浏览器会自动选择指定的字体并应用样式
一般会将字体的大分类，指定为font-family中的最后一个字体

2.行间距

在CSS并没有为我们提供一个直接设置行间距的方式，
* 我们只能通过设置行高来间接的设置行间距，行高越大行间距越大

使用line-height来设置行高

行高类似于我们上学单线本，单线本是一行一行，线与线之间的距离就是行高，
* 网页中的文字实际上也是写在一个看不见的线中的，而文字会默认在行高中垂直居中显示
*
* 行间距 = 行高 - 字体大小

通过设置line-height可以间接的设置行高，
* 可以接收的值：
* 1.直接就收一个大小
* 2.可以指定一个百分数，则会相对于字体去计算行高
* 3.可以直接传一个数值，则行高会设置字体大小相应的倍数

注：对于单行文本来说，可以将行高设置为和父元素的高度一致，
这样可以是单行文本在父元素中垂直居中

如果前边指定了，font中未指定，依然不起作用，此行无效

在font中也可以指定行高
在字体大小后可以添加/行高，来指定行高，该值是可选的，如果不指定则会使用默认值

 font: 20px/50px "微软雅黑";

3.文本

text-transform（可以用来设置文本的大小写）

可选值：
* none 默认值，该怎么显示就怎么显示，不做任何处理
* capitalize 单词的首字母大写，通过空格来识别单词
* uppercase 所有的字母都大写
* lowercase 所有的字母都小写

例：text-transform: lowercase;

text-decoration（可以用来设置文本的修饰）

可选值：
* none：默认值，不添加任何修饰，正常显示
* underline 为文本添加下划线
* overline 为文本添加上划线
* line-through 为文本添加删除线

text-decoration: underline;

a{/*超链接会默认添加下划线，也就是超链接的text-decoration的默认值是underline如果需要去除超链接的下划线则需要将该样式设置为none* */text-decoration: none;}

letter-spacing（可以指定字符间距）

word-spacing（可以设置单词之间的距离）

实际上就是设置词与词之间空格的大小
* 中文来说没啥意义

text-align（用于设置文本的对齐方式）

可选值：
* left 默认值，文本靠左对齐
* right ，文本靠右对齐
* center ，文本居中对齐
* justify ，两端对齐
* - 通过调整文本之间的空格的大小，来达到一个两端对齐的目的

text-indent（用来设置首行缩进）

当给它指定一个正值时，会自动向右侧缩进指定的像素
* 如果为它指定一个负值，则会向左移动指定的像素,
* 通过这种方式可以将一些不想显示的文字隐藏起来
* 这个值一般都会使用em作为单位

text-indent: -99999px;

CSS学习笔记---字体文本相关推荐

Web前端开发之CSS学习笔记11—文本格式和动画设计
目录 1.文本对齐text -align 2.保留空白字符white-space 3.设置文本方向direction 4.设置文本缩进text-indent 4.设置字符间距letter-spacin ...
HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
CSS学习笔记（详细，不定期更新）
CSS 学习笔记 CSS书写规范顺序布局位置属性(position, top, right, z-index, display, float等) 自身大小盒子模型(width, height, p ...
CSS学习笔记 #20201119
CSS学习笔记 #20201119 目录文章目录 CSS学习笔记 #20201119 目录引言选择器权值样式引言 CSS能搭配HTML文档,将网页繁杂的样式信息从HTML文档中相对独 ...
CSS学习笔记（狂神-完整版）
CSS学习笔记(狂神-完整版) HTML + CSS + JavaScript 结构 + 表现 + 动作 1.什么是CSS 如何学习 CSS是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) ...
CSS学习笔记（详细）- 基础
CSS学习笔记从零开始代码风格样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器基础选择器标签选择器类选择器 - 开发最常用多类名 i ...
Web前端 html css学习笔记（更新）
HTML CSS学习笔记 2021/9/29 网页简介 HTML简介第一个网页自结束标签和注释文档声明进制字符编码完整的文档结构 2021/9/30 VScode安装及使用实体 meta ...
前端篇--------1.css学习笔记
1.css 单行文本换行溢出解决方案(css三件套) white-space:nowrap overflow:hidden text-overflow:ellipsis 2.css m ...

CSS学习笔记---字体文本

字体

字体的样式

在网页中将字体分成5大类：

2.行间距

3.文本

CSS学习笔记---字体文本相关推荐

最新文章

热门文章