当前位置: 首页> 科技> IT业 > CSS文本与字体样式

CSS文本与字体样式

时间:2025/7/13 0:25:03来源:https://blog.csdn.net/2301_79155654/article/details/141392264 浏览次数:0次

字体家族、大小、粗细

字体家族
font-family属性

所谓字体家族,就是我们常说的字体,比如常用的方正小标宋简体等等。

如果我们想要设置网页中某个HTML元素下的文本,只需要在对应的选择器中设置font-family:对应字体即可:

*{font-family:方正楷体;
}p{font-family:方正小标宋简体,方正楷体, sans-serif;
}/*像是在第二种写法这样,可以在font-family后面依次写多个字体,每种字体间以‘,’分隔,能够使得当前面的字体无法正常使用时,浏览器自动依次渲染后面的字体直到发现能够正常使用的字体或者到最后使用默认字体*/
可以使用的字体

可以使用的字体有这几种:系统安装的字体,web安全字体,web在线字体,自定义字体

  • 系统安装的字体:

    不同的系统查看方式不同,对于Windows系统,可以在C:\Windows\Fonts文件夹下查看

  • web安全字体:
    web安全字体指的是绝大部分操作系统都安装的字体,可以在大部分设备上正常显示

  • web字体:

​ web字体通常是指通过网络加载和使用的字体。常见的提供web字体服务的网站有Google fonts和Abode fonts。

​ 通过<link>标签引入并使用

文本颜色与背景色

​ 文本颜色通过属性color设置,属性值支持颜色名称、十六进制值、RGB值、RGBA值、HSL值和HSLA值。

​ 背景色 通过属性background-color设置,属性值支持与color相同。

除此之外,colorbackground-color 属性可以使用 inherit 值,表示继承父元素的颜色设置。

文本对齐与行高

文本对齐

text-align 属性用于设置文本在其容器内的水平对齐方式。它适用于块级元素中的文本和行内元素的内容。

​ 常见值有:left(左对齐文本、默认),right(右对齐文本),center(居中对齐文本),justify(两端对齐文本)

行高

line-height 属性用于设置文本行与行之间的垂直间距,即行高。调整行高有助于提升文本的可读性和视觉效果。

​ 行高的属性值可以使用数字值(表示相对于font-size的倍数),百分比(相对于元素font-size的百分比),绝对值(使用具体单位,比如pxem)以及**normal**(默认行高,通常为字体大小的 1.2 至 1.4 倍,具体取决于浏览器)。

文本装饰(下划线、删除线等)

text-decoration 属性

text-decoration 属性是控制文本装饰效果的主要属性。它的值包括none(无任何装饰,常用于移除默认样式,比如链接的下划线),underline(添加下划线),overline(添加上划线),line-through(添加删除线),underline overline(同时添加上划线和下划线)。

text-decoration-color 属性

text-decoration-color 用于设置文本装饰线(下划线、删除线等)的颜色。颜色值支持前文提到的那些。

text-decoration-style 属性

text-decoration-style 用于设置文本装饰线的样式,提供了几种不同的线型选择。

​ 譬如: solid:实线(默认值)

double:双实线。

dotted:点线。

dashed:虚线。

wavy:波浪线。

text-decoration-thickness 属性

text-decoration-thickness 用于设置装饰线的粗细。

组合使用 text-decoration 属性

text-decoration支持组合简写:

p{text-decoration: underline wavy red;
}

​ 这段代码将文本装饰设置为红色波浪线下划线。

其他属性

text-decoration-skip-ink: none: 确保下划线不会跳过字符下缘。

字符间距与单词间距

letter-spacing 属性用于控制文本中字符之间的间距。常用单位为pxem

word-spacing 属性用于控制文本中单词之间的间距。

关键字:CSS文本与字体样式

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

责任编辑: