文本样式

文本字体

color

color 属性用于设置字体颜色。

p {
  color: deepskyblue;
}

font-family

font-family 属性用于设置字体。

p {
  font-family: "Source Han Sans", Helvetica, Arial, sans-serif;
}

思源黑体(Source Han Sans) Github 链接

字体图标

• Iconfont
• FontAwesome

💡 Baidu 静态资源公共库 和 http://staticfile.org 提供了前端常用的静态资源，可以直接引用。

font-size

font-size 属性用于设置字体大小。

• px 像素
• em 1em = 当前元素的字体大小
• rem 1rem = 根元素的字体大小

html {
  font-size: 62.5%; /* font-size: 10px; */
}
 
.container {
  width: 30rem;
}

💡 浏览器默认字体大小是 16px。

font-style

font-style 属性用于设置文字是否以斜体显示。

• normal 正常
• italic 斜体
• oblique 模拟斜体

font-weight

font-weight 属性用于设置文字粗细。

• normal 正常
• bold 粗体
• lighter 比父元素字体细一级
• bolder 比父元素字体粗一级
• 100-900 用于微调字体粗细

text-decoration

text-decoration 属性用于设置文字划线样式。

• none 取消划线
• underline 下划线
• overline 上划线
• line-through 中划线

  .syntax-error {
  text-decoration: underline wavy red; 
  }

text-transform

text-transform 属性用于改变字母的大小写。

• none 取消转换效果
• uppercase 转为大写
• lowercase 转为小写
• capitalize 转为首字母大写

text-shadow

CSS3 text-shadow 属性用于设置文字阴影。

p { 
  text-shadow: 1px 1px 2px black;
}
 
/* 多重阴影 - 求阴影面积 */
h1 {
  text-shadow: -1px -1px 1px #aaa,
               0px 4px 1px rgba(0, 0, 0, 0.5),
               4px 4px 5px rgba(0, 0, 0, 0.7),
               0px 0px 7px rgba(0, 0, 0, 0.4);
}

文本布局

text-align

text-align 属性用于设置文字对齐方式。

• left 左对齐
• right 右对齐
• center 居中，当设置在图片的父元素上时，可以使图片居中。
• ...

line-height

line-height 属性用于设置行高。

p { line-height: 150%; }  /* 1.5 倍 font-size 的行高 */

单行文本垂直居中

.header {
  height: 50px;
  line-height: 50px;
}

text-indent

text-indent 属性用于设置首行文本的缩进。

p { 
  text-indent: 2em;  /* 文章的每一段空两格开头 */
}

🚀 https://codepen.io/twhy/pen/BZKPWz

h1 { text-indent: -9999px; }    /* 对用户隐藏文字 */

letter-spacing

letter-spacing 属性用于设置文字/字母的间距。

<h1>装 <span class="b">13</span></h1>

h1 {
  font-size: 10em;
  color: deepskyblue;
  text-align: center;
  font-family: monospace;
}
 
.b {
  transition: all .3s;
}
 
h1:hover .b {
  letter-spacing: -43px;
}

🚀 https://codepen.io/twhy/pen/QgNBLK

省略文字 ...

以下样式可以让文字过长的时候显示 ... 提示 如果想提早出现 ...，可以给元素设置 width 或 max-width。

<p class="ellipsis">
  唐僧：你想要啊？你要是想要的话你就说话嘛，你不说我怎么知道你想要呢，虽然你很有诚意地看着我，可是你还是要跟我说你想要的。
  难道你真的想要吗？你想要的话我会给你的，你想要我怎么可能不给你呢？不可能你想我不给你，你不想要我却偏给你的。
  大家讲道理嘛！现在我数三下，你要说清楚你要不要……你真的想要吗？那你就拿去吧！你不是真的想要吧？
</p>

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

🚀 https://codepen.io/twhy/pen/MoyYBg

参考链接

• https://css-tricks.com/snippets/css/truncate-string-with-ellipsis/
• https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals