文本

常见属性 Properties

• 更多文字使用事项，请访问 WEB中文字体应用指南、The 10 Best Fonts for Logo Design

常见属性 Properties

item	desc
font-family	字体家族；通常为一个系列 英文优先；先写英文字体，再写中文字体
font-size	字体大小
font-weight	字体重量/加粗；关键字，如light 300、normal 400、bold 600；推荐使用数字 100 - 900
font	以上3个属性的复合写法
color	字体颜色
line-height	行高；通常指定1.5倍行高，易于阅读；PC端通常指定为字体大小+8px的行高；可用于单行文本的垂直方向居中
letter-spacing	字符间距；通常使用em单位；对中文有效
word-spacing	字间距；通常使用em单位；适用于英文，对中文影响较小
hyphens	对英文来说，添加连字符的方式，一般选择auto，更为紧密
text-indent	文本缩进；通常为2em
text-align	文本对齐：默认left；right | center | justify
text-align-last	末尾文本对齐方式；特别适合单行时，字符个数不同时的两端对齐
text-transform	文字变化，首字大写 capitalize | 大写 uppercase | 小写 lowercase；适用于英文
text-decoration	线条修饰：下划线 underline、上划线 overline、删除线 line-through；<del>也可以实现删除效果
text-overflow	文字溢出处理
white-space	空白字符处理，换号、不换行等
vertical-align	行内文本对齐方式：baseline | middle | top | bottom
writing-mode	文字方向，如古文的从右到左 vertical-rl
text-shadow	文字阴影，默认是文字颜色；可以多次叠加，以逗号,区分；更多阴影使用，请访问 盒阴影、滤镜
text-stroke	文字描边颜色和宽度；部分浏览器不支持；建议使用 SVG 实现

font-family: "Alibaba PuHuiTi", "Source Han Serif", "Source Han Sans", "PingFang SC", "Microsoft YaHei", "微软雅黑", Arial, Helvetica, sans-serif;

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

-webkit-text-stroke: length color;

. <a> 和 <form> 相关表单元素无法自动继承父级字体属性，需要显式的设置或指定继承

a,
input,
button {
  font: inherit;
  color: inherit;
}

文本 Fonts

• Arial：西文常见的无衬线字体
• sans-serif：系统默认的无衬线字体

常用字体格式 Formater

• Embedded Open Type - EOT；扩展名：.eot；主要用于 IE
• TrueType - TTF；扩展名 .ttf；文件较大，压缩效果不如 WOFF 和 WOFF2；广泛支持，适合所有现代浏览器
• Web Open Font Format - WOFF；扩展名 .woff；专门为 Web 设计
• Web Open Font Format 2 - WOFF2；扩展名 .woff2；WOFF 的改进版；更小的体积、更好的性能、更快的加载速度
• OpenType - OTF；扩展名：.otf；压缩效果不如 WOFF 和 WOFF2
• SVG - 扩展名： .svg；支持透明度和渐变；文件体积大；现代浏览器已不再推荐使用

• 内容溢出 overflow
• 换行 white-space
• 文字溢出 text-overflow

• 文字方向 writing-mode
• 超链接 <a>
• 目标选择器 :target

• 边框 border
• 文本对齐 text-align text-last-align
• 变换 transform

• 在浅色背景上使用深色文字时，在底部加上浅色投影通常效果最佳
• 在深色背景上使用浅色文字时，在底部加上深色投影通常效果最佳
• 凸版印刷
我志愿加入中国共产党，拥护党的纲领，遵守党的章程，履行党员义务，执行党的决定，严守党的纪律，保守党的秘密，对党忠诚，积极工作，为共产主义奋斗终身，随时准备为党和人民牺牲一切，永不叛党。

.outer {
    background: #596673;
    color: #b7bfc8;
    text-shadow: 0 -2px 2px #000;
}

• 凹版印刷
我志愿加入中国共产党，拥护党的纲领，遵守党的章程，履行党员义务，执行党的决定，严守党的纪律，保守党的秘密，对党忠诚，积极工作，为共产主义奋斗终身，随时准备为党和人民牺牲一切，永不叛党。

.inner {
    background: #8c99a6;
    color: #434d56;
    text-shadow: 0 2px 2px #fff2;
}

.txt-stroke {
    text-align: center;
    font-size: 60px;
    font-family: 'yuwei';
    color: transparent;
    -webkit-text-stroke: 1px #fff;
    line-height: 120px;
    text-shadow: 0 0 10px #ff0;
    background-image: url(../imgs/section.jpg);
}

概述

• 使用 @font-face 定义字体
• 避免用户本地没有页面使用的特定字体
• 字体文件应提前准备好，并推送到服务器/网站
• 多个字体效果应该分别定义，字体名字保持一致
• 仅在用户端浏览页面时临时下载使用；关闭浏览器后，字体被移除
• 中文字体通常比较大，字体下载时，需要时间，所以页面渲染不会立即完成，影响客户体验；请谨慎使用
• 字体的定义通常放在单独的 CSS 文件，需要的时候引入；也可以直接定义并使用
• 除了自定义字体外，还可以直接使用在线字体，如 谷歌字体 - GoogleFonts

基本使用

• 定义字体样式文件 sample.css
• 可以使用本地字体，也可以使用在线字体
• 可以指定颜色 color、大小 font-size 等属性，也可以使用时再指定
• 建议指定字体格式

@font-face {
    font-family: font_name;
    src: url(font_url);
    font-weight: normal;
    font-style: normal;
    font-display: swap;/*先默认字体显式，当字体加载完毕再切换*/
}

• 引用；注意路径
• 在 .css 中引入

@import url('sample.css');

• 在 .html 中引入

<link rel="stylesheet" href="sample.css" />

• 使用

body {
  font-family: font_name;
}

@font-face {
  font-family: 'Poppins';
  src: url(../fonts/Poppins/Poppins-light.ttf);
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url(../fonts/Poppins/Poppins-Regular.ttf);
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url(../fonts/Poppins/Poppins-Bold.ttf);
  font-weight: 600;
  font-display: swap;
}

//定义
@font-face {
    font-family: "YuWei";
    src: url('../fonts/YuWei/YuWeiShuFaXingShuJianTi.ttf')
    font-display: swap;
}
//使用
.core {
    text-align: center;
    font-family: "YuWei";
    font-size: 2.5rem;
    color: #eb2f06;
    outline: #fff;
    font-weight: 700;
    text-shadow: 
        2px 0px 0px #fff, 
        0px 2px 0px #fff, 
        -2px 0px 0px #fff, 
        0px -2px 0px #fff, 
        4px 4px 8px #333;
}

总结 Summary

• 基本使用
• 自定义字体

作业 Homework