CSS字体、文本属性

爱喝牛奶~

已于 2022-03-24 19:28:20 修改

阅读量3.3k

点赞数 2

文章标签： html5 css javascript echarts vue.js

于 2022-03-24 17:24:40 首次发布

本文链接：https://blog.csdn.net/qq_52301431/article/details/123710504

版权

3 、text-decoration 文本修饰

4、 text-transform 文本转换

5、 text-indent 文本缩进

6、 text-shadow 文本阴影

7、 direction 文本方向

8、 letter-spacing 字符间距

9 、word-spacing 字间距

10、 line-height 行高

11、 word-break

一、CSS字体属性

1、 font-size：字号大小

font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。

其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。

font-size:smaller; x-small; xx-small; small; large; larger; x-large; xx-large;

相对长度单位	说明（就是相对于电脑的屏幕分辨率）
em	相对于当前对象内文本的字体尺寸，如果父盒子字体大小为16px，1em=16px
px	像素
绝对长度单位	说明
in	英寸 in：英寸（Inch），绝对长度单位。
cm	厘米 cm：厘米（Centimeter），绝对长度单位。
mm	毫米 mm：毫米（Millimeter），绝对长度单位。
pt	点 pt：点（Point），绝对长度单位，是1/72英寸。1in=72pt=96px

tips:

现在网页中普遍使用14px+。chrome浏览器默认字体大小为16px

尽量使用偶数的数字字号，ie6等老式浏览器支持奇数会有bug。

em 相对长度单位。

相对于当前对象内文本的字体尺寸。如当前行内文本的字体尺寸未被人为设置，则相当于浏览器的默认字体尺寸。1em=16px 24px/16px=1.5em

font-size: 24px font-size: 1.5em

px 像素（Pixel）

相对于设备的长度单位，像素是相对于显示器屏幕分辨率而言的。譬如，WINDOWS的用户所使用的分辨率一般是96像素/英寸。而MAC的用户所使用的分辨率一般是72像素/英寸。

1in = 2.54cm = 25.4 mm = 72pt = 96px = 6em（windows）

容器的大小我们经常用px做单位，字体大小（font-size）很多国内的人使用px做单位，其实用px做字体单位唯一的致命缺点就是在IE下无法用浏览器字体缩放的功能。或者以前的按住Ctrl+滚动鼠标的中间的滚轮。

2、font-weight：字体粗细

字体加粗除了用 b 和 strong 标签外，还可以使用CSS来实现，但CSS是没有语义的。

可用值值的说明
normal 缺省值。字体正常显示。
bold 粗体
bolder 比粗体更加粗
lighter 比正常字体淡

100 至少和200一样淡
200 至少和100一样粗，至少和300一样淡
300 至少和200一样粗，至少和400一样淡
400 字体正常显示，相当于normal。
500 至少和400一样粗，至少和600一样淡
600 至少和500一样粗，至少和700一样淡
700 粗体，相当于bold。
800 至少和700一样粗，至少和800一样淡
900 至少和800一样粗

（如果要让字体正常，则不加此属性，默认就是正常的，也可以写normal或者400）

3、 font-family：字体

font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等。

例如将网页中所有段落文本的字体都设置为微软雅黑，可以使用如下CSS样式代码：

p {
font-family:"微软雅黑";
}
/*可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体，最后使用浏览器默认字体，chrome默认为微软雅黑*/

常用技巧：

各种字体之间必须使用英文状态下的逗号“,”分隔。

中文字体需要加英文状态下的引号，英文字体一般不需要加引号。但如果多个英文单词则需要引号引起来，当需要设置英文字体时，英文字体名必须位于中文字体名之前。例如：font-family: Arial, "微软雅黑"; 。

如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如：font-family: "Times New Roman";。

尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

微软雅黑

4、CSS Unicode字体

在CSS中设置字体名称，是可以直接写中文的。但是在文件编码（GB2312、utf-8等）不匹配时会产生乱码的错误。xp系统不支持类似“微软雅黑”的中文。

方案一：可以使用英文来替代，比如：font-family:"Microsoft Yahei"; 。

方案二：在CSS中直接使用Unicode编码来写字体名称可以避免这些错误。使用Unicode写中文字体名称，浏览器是可以正确解析的。比如：font-family:"\5FAE\8F6F\96C5\9ED1",表示设置字体为“微软雅黑”。

在Unicode编码表中，中文的取值范围是\u4e00~\u9fa5

字体名称	英文名称	Unicode编码
宋体	Simsun	\5B8B\4F53
新宋体	NSimsun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼圆	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

5 、font-style：字体风格

字体倾斜除了用 i 和 em 标签外，可以使用CSS实现，但CSS是没有语义的。平时我们很少给文字加斜体，反而是给斜体标签（i，em）改为普通模式。

font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。

italic：浏览器会显示斜体的字体样式。

oblique：浏览器会显示倾斜的字体样式。强制给它倾斜

<!--
italic和oblique区别：
要搞清楚这个问题，首先要明白字体是怎么回事。一种字体有粗体、斜体、下划线、删除线等诸多属性。但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体，如果你用Italic，就没有效果了~这时候你就要用Oblique.可以理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！

CSS2.0官网解释：
italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用 Oblique属性值来实现倾斜的文字效果.

我的理解：

就是让设置了italic属性，但没有斜体的字，强制性的倾斜。
-->

6 、font综合设置字体样式

font属性用于对字体样式进行综合设置，其基本语法如下：

font: font-style font-weight font-size/line-height font-family;

使用font属性时，必须按照上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。其中不需要的属性可以省略（取默认值），但必须保留font-size、font-family属性，否则font属性将不起作用。

<style type="text/css">
	p{
		font: italic bold 12px/30px Georgia, serif;
	}
</style>

<p>这是一个设置了字体样式的文本</p>

二、CSS文本属性

1 、color 文本颜色


        div{
            color:red;
            color: #fff;
            color:rgb(100,80,20)
            color:rgb(100%,80%,20%)
            color:rgba(100,20,30,0.5)
            color:rgba(100,20,30,.5)


        }

color属性用于指定文本的颜色，有3种表现形式。

color-name：使用颜色名称，如：red, transparent
hex-number：使用十六进制数表示，取值是0~f，每个颜色使用两位表示，如：#ff0000表示红色 0-9 a:10 b:11 c:12 d:13 e:14 f:15 （两两相同可以省略一个，#00ffaa可以写为#0fa）
rgb-number：使用rgb颜色值表示，取值0~255，如rgb(255,0,0)，rgba(100%, 0%, 0%, .5)

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。a的值使用小数表示
rgba：在rgb上多了一给a，表示透明度，取值0~1 完全透明~完全不透明 [ color:rgba(100,20,30,.5)]
CSS3的hsl：使用色相、饱和度、亮度来定义颜色。

HSL 即色相、饱和度、亮度（英语：Hue, Saturation, Lightness）。
- 色相（H）基本属性，就是平常所说的颜色名称，如红色等，取值： (0 ~360) ，0 / 360为红色, 120 为绿色, 240 为蓝色
- 饱和度（S）是指色彩的纯度，越高色彩越纯，低则逐渐变灰，取值： 0-100% 。
- 亮度（L）增加亮度，颜色会向白色变化；减少亮度，颜色会向黑色变化，取值：0-100%。

2、text-align 文本对齐方式

text-align用于指定元素文本的水平对齐方式，取值有 left、right、center、justify（两端对齐文本）

两端对齐：最右边放不下一个单词了，一般情况下就会换行，但是加了这个属性，就不会换，右边会顶满，是通过调节单词之间的间距。主要用于英文锯齿状，针对英文段落中出现空格时，由于两边对齐，空格的大小会有变化。

        div{
            text-align:center;

        }

3 、text-decoration 文本修饰

        div{
            text-decoration:line-through;

        }

text-decoration用于对文本添加修饰，如下划线、删除线等。有如下取值：

none：默认，定义标准的文本，没有任何修饰。

underline：定义在文本下方的一条线 = <ins> 下划线</ins>

overline：定义在文本上方的一条线

line-through：定义穿过文本的一条线 = <del>删除线</del> = <s>删除线</s>

4、 text-transform 文本转换

        div{
            text-transform:lowercase;

        }

text-transform用于转换文本的大小写（主要用于英文），其取值有：

none：默认

capitalize：文本中每个单词以大写字母开头

uppercase：所有单词字母都大写

lowercase：所有单词字母都小写

5、 text-indent 文本缩进

<style>
	p {
        text-indent:50px;
    }
</style>

text-indent 属性规定文本块(块级中的文本)中首行文本的缩进。取值有：

数值：表示像素值

百分比：基于父元素宽度的百分比的缩进。

注意： 负值是允许的。如果值是负数，将第一行左缩进。


em：相当于当前元素的font-size的属性值
例：font-size: 32px; 2em = 32px;

6、 text-shadow 文本阴影

<style type="text/css">
	h1 {
		text-shadow: 2px 2px #FF0000;
	}	
	
	h4 {
		text-shadow: -10 -10 3px #FF0000，10px 10px 2px red ;
	}
</style>

text-shadow用于设置文本的阴影效果。可以有多个阴影，语法格式是

text-shadow: h-shadow v-shadow blur color;

h-shadow：必需。水平阴影的位置。允许负值。horizontal， X轴往右是正值

v-shadow：必需。垂直阴影的位置。允许负值。 vertical，Y轴向下是正值

blur：可选。模糊的距离。

color：可选。阴影的颜色。

7、 direction 文本方向

CSS中direction属性决定了HTML文字渲染方向

direction 用于指定文本的方向。取值如下：

ltr：默认的，文本方向从左到右 left to right

rtl：文本方向从右到左。right to left

<!-- 简单的右对齐,其实这是direction的默认效果,文字不会倒着写 -->
<div style="direction:rtl;">this is a test</div>

direction和text-align的区别：
针对非阿拉伯语，如字母或者汉字，二者没有什么区别，都可以实现左右对齐。
只针对阿拉伯语才有区别，书写方向有区别，比如是1 2 3 4，text-align选择right后，就变成4 3 2 1

8、 letter-spacing 字符间距

<style>
	h1 {
        letter-spacing:2px;
  	}
	h2 {
      	letter-spacing:-3px;
  	}
</style>

letter-spacing 属性增加或减少字符间的空白（字符间距），使用数值表示，可以是负数。主要用于汉字。如果用于英文段落增加/减少字母之间的空白

9 、word-spacing 字间距

word-spacing属性增加或减少单词与单词之间的空白，允许使用负值。主要用于英文段落

如果作用于中文，挨在一起的中文会被识别为一个单词

<style>
  p { 
      word-spacing:30px;
  }
</style>

<p>da hai is a girl</p>
<span>G</span>
<span>o</span>

10、 line-height 行高

<style>
    span {
    	line-height: 2;
    }
    p {
        line-height: 20px;
    }
    div {
        line-height: 100%;
    }
</style>

line-height 用于设置文字行与文字行之间的距离。取值如下：

number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

length：设置固定的行间距 px em 。

%：基于当前字体尺寸的百分比行间距。

注意：一般情况下，行距比字号大7 8像素即可。

使用技巧：在一行的盒子内，我们设定行高等于盒子的高度，就可以是文字垂直居中。只适用于单行文本

11、 word-break

<style>
   .div3 {
       word-break: keep-all;
   }
</style>
<div class="test3">
 	一个段落-的汉字有非-常多的文本内-容一个段落的汉-字有非常多的文本内容一个段落的汉字有非常多的文本内容一个段落的汉字有非常多的文本内容一个段落的汉字有非常多的文本内容一个段落的汉字有非常多的文本内容一个段落的汉字有非常多的文本内容一个段落的汉字有非常多的文本内容
</div>

规定自动换行的处理方法。通过使用 word-break 属性，可以让浏览器实现在任意位置的换行。

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行(主要用于英语) 一个单词遇到边界就会被分为两部分
keep-all	保持同行显示，不是中文日语韩语(CJK)其实和normal一样(主要用于CJK)，所以主要用于中日韩

注意：

keep-all在 半角空格和短横线连接符(-)等处能换行，只有一个-，任意位置换行，多个-，该换行才换行

keep-all: 所有“单词”一律不拆分换行，注意，我这里的 “单词” 包括连续的中文字符（还有日文、韩文等），或者可以理解为只有空格等可以触发自动换行。非中日韩语言和normal一样

break-all：所有单词碰到边界一律拆分换行，不管你是 incomprehensibilities 这样一行都显示不下的单词，还是 long 这样很短的单词，只要碰到边界，都会被强制拆分换行。中日韩语言和normal一样

爱喝牛奶~

关注

2
点赞
踩
40

收藏

觉得还不错? 一键收藏
0
评论
CSS字体、文本属性

一、CSS字体属性1、font-size：字号大小font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。font-size:smaller; x-small; xx-small; small; large; larger; x-large; xx-large;相对长度单位说明（就是相对于电脑的屏幕分辨率） em 相对于当前对...
复制链接

扫一扫