文本

@Text

常见属性 Properties

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

基本CSS
类别	说明
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: "微软雅黑", "Microsoft YaHei", Quicksand, Arial, Helvetica, sans-serif;

. 英文优先，如代码

font-family: 'Quicksand', 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;
}

[] 打点溢出 - 单行文字超出部分以点表示；更多案例实现，请访问入党誓词

.内容溢出 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);
}

自定义字体 @fontface

概述

.使用 @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;
}

[] 定制西文字体 - Poppins；分轻型、普通和加粗字体，具体要看提供的字体文件有什么类型

@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;
}

[] 定制中文字体 - 禹卫行书；4.8M的字体文件，用户浏览时，字体下载到本地花费了1.9分钟

//定义
@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;
}

字体图标 Icon

Iconfont
FontAwesome
Yesicon
Boxicons
Remix Icon

分栏布局 Columns

.将大块文字分为若干栏，增加阅读性

.更多信息，请访问 MDN - columns

类别	说明
column-width	最小列宽，由浏览器决定分成多少列；不能使用%
column-count	最大列数/栏数
columns	复合属性：column-width column-count；根据宽度或列数布局；顺序任意
column-span	分列元素的跨度，all 通栏，如标题
column-gap	列间隔；默认是16px
column-rule	分隔符样式，同 border
column-fill	填充模式，默认是平均填充 balance，也可以指定 auto，逐列填充；通常需指定容器高度

如果同时设置了 column-width 和 column-count，则 columns 属性会优先考虑 column-count

如果使用最小列宽，放不下预设的列数，则减少列数

[] 分栏排版，请参考文章排版、个人网站

. 分2栏，并指定最小宽度

. 分栏后，应特别注意两侧的文字的对齐

. 部分内容跨栏显示

[] 瀑布流 - Masonry

.masonry-columns {
  columns: 4 200px;
  column-gap: 10px;
}

总结与作业 Summary & Homework

字体: Arial：西文常见的无衬线字体

sans-serif：系统默认的无衬线字体
常用字体格式: 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；支持透明度和渐变；文件体积大；现代浏览器已不再推荐使用
总结: 基本使用

自定义字体

字体图标

分列布局
作业: .利用喜欢的字体、熟悉的字体图标和方式完善个人网站