font-family

字体系列。

font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。

font-weight

字重（字体粗细）。
取值范围：
image.png

font-size

字体大小。

  1. p {
  2.   font-size: 14px;
  3. }

如果设置成inherit表示继承父元素的字体大小值。

color

设置内容的字体颜色。
支持三种颜色值：

  • 十六进制值 如: ＃FF0000
  • 一个RGB值 如: RGB(255,0,0)
  • 颜色的名称 如: red
  1. p {
  2.   color: red;
  3. }

Demo

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>字体属性</title>
  5.     <style type="text/css">
  6.         body{
  7.             font-family: "Hoefler Text","Arial";
  8.             font-size: 30px;    
  9.             color: rgb(255,103,0);
  10.             font-style: italic;
  11.             font-weight: 900;
  12.             text-decoration: line-through; 
  13.         }
  15.     </style>
  16. </head>
  17. <body>
  18.     <!-- 像素单位： px  em rem  -->
  19.     MJJ 沐风
  22. </body>
  23. </html>

总结

  1. 1.字体
  2.     font-family: "微软雅黑","宋体",...;
  3. 2.字体大小
  4.     font-size: 20px;
  5.     像素单位： px,em,rem
  6.     px: 绝对单位。 一旦设置了值，不管网页如何变化始终如一
  7.     em:相对单位。当前某块区域的字体大小，比如给p标签设置了字体大小20px，那么1em= 20px;
  8.     rem：相对单位 主要应用于移动端
  9. 3.字体颜色
  10.     color: red
  11.     颜色表示法：  
  12.         - 单词表示法  red green yellow purple.
  13.         - rgb()表示法
  14.             + rgba()  a:alpha 表示透明度
  15.         - 十六进制表示法
  16.             + #ff6700
  17. 4.字体样式
  18.         font-style
  19.             normal : 默认的字体
  20.             italic:斜体
  21. 5.字体粗细
  22.         font-weight:
  23.             bold:粗的字体
  24.             100~900
  25.             400表示默认