Mr.J--谈谈CSS和Html（font)

最近刷题一直看见font-xxx和xxx同时出现，每次总会运气很好的避开正确答案。对于这个font属性本人表示很迷，简单总结一下吧。

font-family

font-family 可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。也就是说，font-family 属性的值是用于某个元素的字体族名称或/及类族名称的一个优先表。浏览器会使用它可识别的第一个值。你如果不关心是什么字体，这个属性就可以使用

font-weight

设置文本的粗细（bolder设置在父元素的基础上加粗，lighter则是更细）

使得p段落的文本加粗

font-size

设置元素的字体大小。注意，实际上它设置的是字体中字符框的高度；实际的字符字形可能比这些框高或矮（通常会矮）。

各关键字对应的字体必须比一个最小关键字相应字体要高，并且要小于下一个最大关键字对应的字体。 font-size的作用是为给定字体的em框提供一个大小，而不能保证实际显示的字符就是这种大小。

font-style

定义字体风格，属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲，用户代理可以根据正常字体计算一个斜体字体。

normal	默认值。浏览器显示一个标准的字体样式。
italic	浏览器会显示一个斜体的字体样式。
oblique	浏览器会显示一个倾斜的字体样式。

font-variant

属性设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch

对当前的font-family进行收缩拉伸，只不过所有主流浏览器都不支持 font-stretch 属性。

font

font 简写属性在一个声明中设置所有字体属性。

css:

html:

以上是在CSS 中设置字体的一些属性，同样的在html中也有，只不过语法不同

CSS：


.title{font-size: 50px;}div{text-align: center;}

Html：

<!DOCTYPE html>
<html><!--作者：2538808265@qq.com时间：2018-09-16描述：  改变文本背景颜色-->
<body style="background-color:PowderBlue;">
<h1>Look! Styles and colors</h1>
<!--作者：2538808265@qq.com时间：2018-09-16描述： 改变文本的字体,颜色,大小
-->
<p style="font-family:verdana;color:red;font-size: 30px;">
This text is in Verdana and red</p>
</body>
</html>

有些用法也存在兼容性问题，例如：在 HTML 4.01 中，不赞成使用 font 元素的 color 属性；在 XHTML 1.0 Strict DTD 中，不支持 font 元素的 color 属性。

（图片来源：《CSS权威指南》）