7.20 Web前端-字体样式

今天为大家介绍一下关于字体的相关知识，这里的知识比较简单，因为之前的教学中我们已经接触到了一部分关于字体的知识，在这里我来汇总说一下。

1.长度单位：

长度单位就是你的字体在网页中占用的长度是多少，在web中不是用现实中的米或者厘米来度量长度的，下面我来介绍一下四种在web中使用到的长度单位：

1.像素 px

屏幕上的一个个小点，正常情况下，我们看不到的，要放到最大，

也是最常用的长度单位，基本上后面用的全是px设定固定长度；

2.百分比 %

设置的百分比，是父元素内容区长度的百分比，是相对单位，在设计项目中经常会使用到；

3.em

相对单位，相对于当前元素的字体大小设置长度，若当前元素没有设置字体大小，

就会继承祖先元素的字体大小，直到继承html的默认字体大小，

html默认的字体大小是16px，也就是1em=1个font-size；

4.rem

相对单位，只相对于根元素根标签的字体大小进行设置；

也就是1rem=html的1个font-size，多用于移动端的布局。

用最基本的px像素单位给大家举个例子：

<!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: 50px;}</style></head><body><p>我是一行普通的文字</p></body>
</html>

我们来吧p标签内部的文字像素改为50px，运行结果如下：

可以看到p标签包裹的文字字体变得比平常大很多。

2.颜色的单位：

在网页中我们经常可以看到各种颜色的文字，那么这些颜色的单位是什么样的大家知道吗，在这里我给大家介绍五个颜色的单位：

1:在CSS可以直接使用颜色的单词来表示不同的颜色

只适用一些简单的颜色

2:使用RGB值来表示不同的颜色

RGB ：0-255

语法：rgb(red, green, blue)

3:RGBA

语法：rgba(red, green, blue,a)

透明度：0-1之间

rgba(red, green, blue,0) 完全透明

transparent 完全透明

4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样

0-9,abcdf

ff 相当于255 表示最大

00 相当于0 表示最小

如果两两重复，可以截取一位，例如：#ff0000,简写#f00

5:HSL值 HSLA值

包含四个属性：亮度，色相，饱和度，透明度

对于我个人来说，在设计网页的过程中，我喜欢使用rgb来上色，因为可以直接吸取所需要的的颜色然后复制上去，非常方便。

3.字体的分类：

网页中的字体分为五大类，这个我们只需要了解一下即可，后面用到的地方并不多：

1.serif （衬线字体）

2.sans-serif （非衬线字体）

3.monospace （等宽字体）

4.cursive （草书字体）

5.fantasy （虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类以后，浏览器会自动选择指定的字体并应用样式，一般会将字体的大分类，指定为font-family中的最后一个字体，用来兜底。

补充几个常用的字体样式：

font-size 设置文字大小

font-style 设置文字斜体

font-weight设置文字的加粗

font-variant设置一个小型大写字母

4.行间距：

很多人在一个块元素或者行内块元素中间写文字的时候，会经常烦恼文字上下对不齐，这时候就要用到行高设置来确保文字在上下是居中的，

1.行高（line height）文字占有的实际高度

用line-height 来设置行高，然后行内文字可上下居中，有以下几个可选值：

a：直接跟大小例如40px 50px

b：直接跟数值，是字体大小的倍数例如1，2，3，4，

c：可以跟百分比，是字体大小的百分比

2.单行文本在父元素中垂直居中，行高=上间距+字体大小+下间距，上间距和下间距平分空白的区域

3.font1.中也可以指定行高

5.文本样式：

1: text-transform 可以用来设置文本的大小写

可选值：

none 默认值，正常显示

capitalize 首字母大写

lowercase 设置字母小写

uppercase 设置字母大写

2: text-decoration [dɛkə'reɪʃ(ə)n] 可以用来设置文本的修饰

可选值：

none 默认值正常显示

underline 下划线

overline 上划线

line-through 删除线

3: letter-spacing可以指定字符间距

4: word-spacing可以设置单词之间的距离

5: text-align用于设置文本的对齐方式

可选择：

left 默认值靠左对齐

right 靠右对齐

center 居中对齐

6: text-indent 设置首行缩进，一般常用单位是em

7: white-space: ; 设置网页如何处理空白

8: text-overflow 文本溢出包含元素时发生的事情

9:vertical-align 设置元素垂直对齐的方式

10: text-shadow: h-shadow v-shadow blur color; 设置文本阴影

水平位移距离必填可正可负

垂直位移距离必填可正可负

模糊半径可选

阴影颜色可选默认是字体的颜色

到这里今天的内容就介绍完毕了，比较简单，那么字体样式今天先给大家说到这里啦，有什么错误欢迎大家指出，谢谢大家观看。

7.20 Web前端-字体样式相关推荐

Web前端字体样式
<!DOCTYPE html> <html > <head><meta charset="UTF-8"><title>文 ...
Web前端HTML样式 CSS选择器
Web前端 HTML 作用: 学习如何搭建页面结构和准备页面的内容, 相当于盖房子(毛坯房) HyperTextMarkupLang: 超文本标记语言超文本: 指不仅仅是纯文本,还包括字体效果和多媒 ...
Web前端——字体规范
字体规范 1 在设定字体样式时对于文字字号样式和行间距应必须使用css样式表,禁止在页面中出现<font size=?>标记 2 字体大小:在网页中中文应首选使用宋体,英文和数字 ...
web前端字体居中_html里文字居中代码怎么写？_WEB前端开发,html,css
web前端是什么意思?_WEB前端开发 web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流.html里 ...
web前端字体居中_html里文字居中代码怎么写？_WEB前端开发
web前端是什么意思?_WEB前端开发 web前端就是前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流. html ...
Web前端之样式继承与其他概念
目录一.继承二.选择器的权重三.长度单位 1.像素 2.屏幕分辨率 3.图像分辨率 4.百分比 5.em 6.rem 四.颜色单位 1.RGB值 2.RGBA 3.十六进制的RGB值一.继承 ...
web前端字体居中_css文字居中怎么弄？
CSS是一种定义样式结构如字体.颜色.位置等的语言,被用于描述网页上的信息格式化和现实的方式.下面我们来看一下css设置文字居中的方法. css可以通过为文字所在标签添加text-align:cent ...
能改变原生web前端元素样式的water.css
最近看资料时,无意间看到了GitHub上有一个css项目竟然达到了6k的star量,瞬间提起了兴趣GitHub地址戳这里:https://github.com/kognise/water.css既然提 ...
web前端字体图标下载
icomoon字库icmoon字库阿里iconfont字库阿里iconfont字库使用方法https://www.bilibili.com/video/BV1pE411q7FU?p=256 ![在 ...

7.20 Web前端-字体样式

7.20 Web前端-字体样式相关推荐

最新文章

热门文章