前言：
而今姐妹们对“html中的字体设置”可能比较珍视，同学们都想要了解一些“html中的字体设置”的相关资讯。那么小编同时在网络上网罗了一些关于“html中的字体设置””的相关内容，希望各位老铁们能喜欢，看官们一起来了解一下吧！文字是网页展示的重要内容之一，所以对文字的修饰也是CSS重点关注的一部分， CSS提供了以下常用的样式属性来修饰文字。
color 属性
color 用来设置文字颜色。
设置方式支持以下几种格式
英语颜色单词形式，如: red（红）、black（黑）、orange（橙色）等。
<style> .box { color: red; }</style><div class="box">文字颜色</div>十六进制表示法， 设计软件中通用的表示方法。例如：ff00000; ff 即为十进制255；每种颜色分为 0~255的数字。如果表示颜色值重复 例如：#ffaabb 可以简写为#fab.。黑色为 #000 ，白色为 #fff。以#ff0000为例，两两分组，分别表示三原色：红、绿、蓝。<style> .box { color: #ff0000; } .box1 { color: #f00; }</style><div class="box">文字颜色</div><div class="box1">简写形式</div>RGB 表示法例如: color: rgb(255,0,0); rgb 内部的三个值，依次代表三原色 红、绿、蓝。其中 rgb(0,0,0) 代表黑色， rgb(255,255,255) 表示白色。<style> .box { color: rgb(255, 0, 0); }</style><div class="box">文字颜色</div>RGBA 表示法， 在RGB的表示方法的基础上增加了透明度（最后一个参数代表透明度）。0-表示透明 1-表示实心。透明度是介于[0,1]之间的值。RGBA 从 IE9开始兼容。<style>.box { color: rgba(255, 0, 0, 0.5);}</style><div class="box">文字颜色</div>font-size 属性
font-size 属性用来设置字体大小，单位通常为px 也可以为em,rem
单位的解释
px：像素em: 相对元素字体的倍数rem：相对html字体的倍数， 例如：html标签 设置为font-size为100px ， div 设置font-size为1.5 rem 实际表现为：150px。
<style> .box { font-size: 30px; }</style><div class="box">文字大小</div>font-weight 属性
设置字体的粗细程度，常用的属性有 normal 和 bold 两个值。
可以用以下值表示，也可以用数字表示。
值
意义
normal
正常粗细，和400值相等
bold
加粗，与700数值相等
lighter
比 正常粗细还细， 不常用
bolder
比 加粗还粗，不常用
100 200 300 400 500 600 700 800 900
使用数字定义字体粗细
inherit
从父元素继承字体粗细
<style>.box_normal { font-weight: normal;}.box_bold { font-weight: bold;}.box_lighter { font-weight: lighter;}.box_bolder { font-weight: bolder;}.box_number { font-weight: 600;}</style><body> <div class="box_normal">font-weight演示：正常粗细</div> <div class="box_bold">font-weight演示，加粗</div> <div class="box_lighter">font-weight演示，更细</div> <div class="box_bolder">font-weight演示， 更粗</div> <div class="box_number">font-weight演示， 数字</div></body>font-style 属性
设置字体的倾斜程度
值
意义
normal
正常字体， 不带倾斜效果
italic
倾斜字体（常用，使用倾斜字体）
oblique
倾斜字体（用常规字体模拟倾斜，不常用）
<style> .box1 { font-style: normal; } .box2 { font-style: italic; } .box3 { font-style: oblique; }</style><body> <div class="box1">正常字体</div> <div class="box2">倾斜字体</div> <div class="box3">倾斜字体2</div></body>text-decoration 属性
设置文本的修饰线的样式
示例
意义
none
无线(a标签去除下划线会用到)
underline;
下划线
line-through;
删除线
…等等
还有很多，可自行百度
<style> .decoration-none { text-decoration: none; } .decoration-underline { text-decoration: underline; } .decoration-line-through { text-decoration: line-through; }</style><body> <div class="decoration-none">无线修饰</div> <div class="decoration-underline">下划线</div> <div class="decoration-line-through">删除线</div></body>font-family 属性
指定使用的字体族，操作系统一般自带很多字体；
例如：window操作系统中的 ‘微软雅黑’ ，黑体等。
字体文件的格式有很多，比如 eot,woff2,woff,ttf,svg等。
font-family 可以一次指定多个字体， 后面的字体属于后备字体，只有前面的字体没有找到，才会使用后面的字体。
<style> div { font-family: serif, "Time New Roman", "微软雅黑" }</style><body> <div>字体</div></body>自定义字体
某些时候，我们的字体比较个性化，或者我们的字体是一个图标字体（一种用符号表示图片的方式）。那么此时，需要我们使用 @font-face 自定义字体
自定义的字体一般是随着网页发布在服务器端，操作系统中并没有。
推荐一个比较好用的字体库网站：（具体使用方式请自行百度）。
// 下载字体地址: 并复制到项目中的某个文件夹下// 使用 @font-face 定义字体// 使用 font-family: "引用字体"<style> div { font-family: "站酷高端黑 Regular" } /* CDN 服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。*/ @font-face { font-family: "站酷高端黑 Regular"; font-weight: 400; src: url("font/DrRgEiqsUPAuu85aZrGPH.woff2") format("woff2"), url("font/DrRgEiqsUPAuu85aZrGPH.woff") format("woff"); font-display: swap; }</style> 标签： #html中的字体设置 #html怎么设置字体居右 #html文本字体颜色 #css字体突出效果 #css多行文本
