龙空技术网

CSS基础-文字样式

多叉树 51

前言:

而今姐妹们对“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多行文本