Skip to main content

CSS3 文本字体专题

一、CSS3 换行​

1、自动换行处理方法​

word-break: normal / break-all / keep-all;
  • normal：使用浏览器默认的换行规则。
  • break-all：允许在单词内换行。
  • keep-all：只能在半角空格或连字符处换行。

兼容性：IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+

2、允许长单词或 URL 换行​

word-wrap: normal / break-word;
  • normal：只在允许的断字点换行（浏览器保持默认处理）
  • break-word：在长单词或 URL 地址内部进行换行。

兼容性：IE5.5+、FireFox3.5+、Chrome23+、Safari6.1+、Opera12.1+

二、CSS3 新文本属性​

1、如何对齐段落的最后一行​

text-align-last: auto / left / right / center / justify / start / end / initial / inherit;
  • auto：无特殊对齐方式。
  • justify：内容两端对齐。
  • start：内容对齐开始边界。
  • end：内容对齐结束边界。

兼容性：text-align-last 属性只有 IE 支持，在 Firefox 中需要加上其前缀 -moz, Chrom50.0.2661.102 以上

注意（text-align-last 只有在 text-align 属性设置为 justify 时才起作用）

2、溢出文本显示隐藏​

overflow: visible / hidden;

3、文本溢出效果​

text-overflow: clip / ellipsis / string;
  • clip：修剪文本
  • ellipsis：显示省略符号“…”来代表被修剪的文本
  • string：使用给定的字符串来代表被修剪的文本

兼容性：IE6.0+、FireFox7.0+、Chrome4.0+、Safari3.1+、Opera11.1+（9.0 -o-）

4、文本超出一行显示省略号​

overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;

5、文本超出两行显示省略号​

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;

6、文本阴影​

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

兼容性：IE10+、FireFox3.5+、Chrome4+、Safari4+、Opera9.5+

三、CSS3 字体​

1、@font-face 语法规则​

font-family: <YourWebFontName>;
src: source [format] [weight] [style];
  • YourWebFontName：自定义的字体名称，将被引用到 Web 元素中的 font-family。
  • source：自定义的字体的存放路径，可以是相对路径也可以是绝路径。
  • format：自定义字体的格式，主要用来帮助浏览器识别。
  • weight：定义字体是否为粗体。
  • style：定义字体样式，如斜体。

兼容性：IE9+、FireFox3.5+、Chrome4+、Safari3.2+、Opera10+

2、@font-face 字体格式​

  • TureTpe (.ttf)

Windows 和 Mac 的最常见的字体，是一种 RAW 格式，因此不为网站优化。

兼容性：IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile Safari4.2+

  • OpenType (.otf)

被认为是一种原始的字体格式，内置在 TureType 的基础上，所以也提供了更多的功能。

兼容性：FireFox3.5+、Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari4.2+

  • Web Open Font Format (.woff)

Web 字体中最佳格式，是开放的 TrueType / OpenType 的压缩版本，同时也支持元数据包的分离

兼容性：IE9+、FireFox3.5+、Chrome6+、Safari3.6+、Opera11.1+

  • Embedded Open Type (.eot)

IE 专用字体，可以从 TrueType 创建此格式字体

兼容性：IE4+

  • SVG (.svg)

基于 SVG 字体渲染的一种格式

兼容性：Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari3.2+

3、@font-face 字体应用​

通用模版

@font-face {
  font-family: 'YourWebFontName';
  src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
  src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('YourWebFontName.woff') format('woff'), /* 所有主流浏览器 */
    url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
    url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}

或者 woff2 结合 woff：

@font-face {
  font-family: 'audiowide';
  src: url('./fonts/audiowide-regular-webfont.woff2') format('woff2'),
    url('./fonts/audiowide-regular-webfont.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

字体文件+CSS 模板一键生成网站：https://www.fontsquirrel.com/tools/webfont-generator