Generic Families & Font Families

TIP
浏览器默认会设置一些字体,那么浏览器展示的时候会如何展示呢,有一下几种方式

系统平台安装的字体User's computer
可以从这里查询到 https://www.cssfontstack.com/
web fonts
如 google fonts
font face 相当于font-weight
from server
TIP
1️⃣ ttf TrueType/OpenType font that contains information 目前浏览器中都广泛使用
2️⃣ woff Web Open Font Format 他是压缩的compressed
3️⃣ woff2.0
- 下载字体
- 定义字体
@font-face {
font-family: "AnonymousePro";
src: url('./aonymousePro-Regular.ttf');
}
@font-face {
font-family: "AnonymousePro";
src: url('./aonymousePro-Bold.ttf');
font-weight: 700;
}
/*指定format*/
@font-face {
font-family: "AnonymousePro";
src: url('./aonymousePro-Regular.woff2') format("woff2"),
url('./aonymousePro-Regular.woff') format("woff"),
url('./aonymousePro-Regular.ttf') format("truetype");
}
使用
.info { font-family: "AnonymousePro"; }
font其他样式
font-weight
font-style
font-variant
font-strech
letter-spacing
white-space
line-height 可以相对与font-size line-height - CSS: Cascading Style Sheets | MDN (mozilla.org)
text-decoration
/*红色波浪线*/ text-decoration: underline wavy red;text-shadow
