css字体样式(Font Style),属性

Posted 2020-07-22 Turbo12138

css字体样式(Font Style),属性

 

 

css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识。以下是我精心整理的css字体样式属性知识，供大家学习参考：

css文本样式

序号	中文说明	标记语法
1	字体样式	{font:font-style font-variant font-weight font-size font-family}
2	字体类型	{font-family:"字体1","字体2","字体3",...}
3	字体大小	{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4	字体风格	{font-style:inherit|italic|normal|oblique}
5	字体粗细	{font-weight:100-900|bold|bolder|lighter|normal;}
6	字体颜色	{color:数值;}
7	阴影颜色	{text-shadow:16位色值}
8	字体行高	{line-height:数值|inherit|normal;}
9	字 间 距	{letter-spacing:数值|inherit|normal}
10	单词间距	{word-spacing:数值|inherit|normal}
11	字体变形	{font-variant:inherit|normal|small-cps }
12	英文转换	{text-transform:inherit|none|capitalize|uppercase|lowercase}
13	？	{font-size-adjust:inherit|none}
14	？	{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}

1. 字体样式：font

语法：{font:font-style font-variant font-weight font-size font-family}
[ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体类形>
作用：简写属性，提供了对字体所有属性进行设置的快捷方法。
注意：字体样式用作不同字体属性的略写，特别是行高。例如 P { font: italic bold 12pt/14pt Times, serif }指定该段为bold(粗体)和italic(斜体)Times或serif字体，12点大小，行高为14点。
例子：字体字体

2. 字体类形：font-family

语法：{font-family:字体1,字体2,字体3,...}
作用：调用客户端字体
说明：
·当指定多种字体时，用"，"分隔每种字体名称。
·当字体名称包含两个以上分开的单词时，用""把该字体名称括起来。
·当样式规则外已经有""时，用‘‘代替""。
注意：如果在font-family后加上多种字体的名称，浏览器会按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体，一旦遇到与要求的相匹配的字体，就按这种字体显示网页内容，并停止搜索；如果不匹配就继续搜索，直到找到为止，万一样式表里的所有字体都没有安装的话，浏览器就会用自己默认的字体来替代显示网页的内容。
例子：{font-family:黑体,隶书;}　　字体类型

3．字体大小：font-size

语法：{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
作用：设定文字大小
说明：使用比例关系
·xx-small
·x-small
·small
·medium
·large
·x-large
·xx-large

例子：{font-size:18pt;}　　字体大小

4. 字体风格：font-style

语法：{font-style:inherit|italic|normal|oblique}
作用：使文本显示为扁斜体或斜体等表示强调
说明：
·inherit　继承
·italic 斜体
·normal　正常
·oblique　偏斜体

5．字体粗细：font-weight

语法：{font-weight:100-900|bold|bolder|lighter|normal;}
作用：设定文字的粗细
说明：
·bold 粗体(相当于数值700 )
·bolder 特粗体
·lighter 细体
·normal 正常体(相当于数值400)
注意：取值范围从数字100~900，浏览器默认的字体粗细为400。另外可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。

6. 字体颜色：color

语法：{color: 数值}



作用：字体颜色
说明：颜色参数取值范围
·以RGB值表示
·以16进制（hex）的色彩值表示
·以默认颜色的英文名称表示
注意：以默认颜色的英文名称表示无疑是最为方便的，但由于预定义的颜色种类太少，所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多，不但可以用数字的形式精确地表示颜色，而且也是很多图像制作软件（如Photoshop）里默认使用的规范，这样一来就为图片和网页更好地结合打下了坚实的基础。


7. 文字阴影颜色：text-shadow

语法：{text-shadow:16位色值}
说明：好像不起作用?
例子：中国中国

8. 字体行高 

语法：{line-height:数值|inherit|normal}
作用：行与行之间的距离
说明：取值范围
·不带单位的数字：以1为基数，相当于比例关系的100%
·带长度单位的数字：以具体的单位为准
·比例关系
注意：行距是指上下两行基准线之间的垂直距离。一般地说，英文五线格练习本，从上往下数的第三条横线就是计算机所认为的该行的基准线。如果文字字体很大，而行距相对较小的话，可能会发生上下两行文字互相重叠的现象。

9. 字 间 距：letter-spacing 

语法：{letter-spacing:数值|inherit|normal} 作用：控制文本元素字母间的间距，所设置的距离适用于整个元素。 注意：数值 - 设置字间距长度，正值表示加进父元素中继承的正常长度，负值则減去正常长度。在数字后指定度量单位：ex(小写字母x的高度), em(大写字母M的宽度)。
例子： 中国china　　 中国china

10. 单词间距：word-spacing 

语法：{word-spacing:数值|inherit|normal}
说明：单词间距指的是英文每个单词之间的距离，不包括中文文字。间隔距离的取值：points、em、pixes、in、cm、mm、pc、ex、normal等。

11. 字体变形：font-variant 

语法：{font-variant:inherit|normal|small-cps
作用：用于正常和小型大写字母间切换(比正常大写字母略小)
说明：small-caps 小型大写字母

12. 字母大小写转换：text-transform 

语法：{text-transform:inherit|none|capitalize|uppercase|lowercase}
作用：设置一个或几个字母的大小写标准。
说明：
·none　不改变文本的大写小写。
·capitalize　元素中毎个单词的第一个字母用大写。
·uppercase　将所有文本设置为大写。
·lowercase　将所有文本设置为小写。
例子： CHINA ABCD　CHINA ABCD

13. font-size-adjust 

语法：{font-size-adjust:inherit|none}
定义用法：font-size-adjust 属性为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。
说明：字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读。举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height 是 58px ）。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。

14. font-stretch 

语法：{font-stretch:condensed | expanded | extra-condensed | extra-expanded | inherit | narrower | normal |
　　　 semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | wider}
定义用法：font-stretch 属性可对当前的 font-family 进行伸缩变形。
所有主流浏览器都不支持 font-stretch 属性。