H5 Mosh教程笔记
先列出教程中会用到的网站
网站H5规范验证网站
CSS格式规范验证网站
转义字符查询
免费图片下载网站
免费图片视频下载网站
浏览器HTML标签，CSS属性支持情况查询网站
CSS一致化工具安装
渐变色代码生成网站
CSS形状代码生成网站
字体网站fontsquirrel
字体网站fonts
字体网站myfonts
rem字体大小预览网站
教程开始
· 字体
字体分类
image.png
· 加载字体
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on August 18, 2022 */
/* 注册字体的写法，字体都要先注册再使用 */
@font-face {
font-family: 'opensans';
src: url('fonts/opensans/opensans-bold-webfont.woff2') format('woff2'),
url('fonts/opensans/opensans-bold-webfont.woff') format('woff');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'opensans';
src: url('fonts/opensans/opensans-regular-webfont.woff2') format('woff2'),
url('fonts/opensans/opensans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
body {
margin: 10px;
font-family: 'opensans', Courier, monospace;
}
p {
/* 设置字体，通常是个字体族，有哪个用哪个，vscode提示的这些字体都是安全字体，基本电脑上都有*/
font-family: 'opensans', Courier, monospace;
/* 设置字体的粗细 */
font-weight:normal;
/* 设置字体样式，斜体，还是其他 */
font-style: normal;
/* 字体大小，字号 */
font-size: medium;
/* 字颜色，通常标题和内容的字体颜色有区别会好看一些 */
color: #444;
}
h1 {
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio consectetur nobis dolor, earum exercitationem corporis totam praesentium voluptates vero sunt deleniti repudiandae molestiae consequuntur consequatur quis possimus vel dolore harum ex repellendus culpa, iure incidunt nisi est? Earum consectetur vero corporis cumque? Eos animi impedit dignissimos id officiis! Explicabo, cum?</p>
<a href="#">Link</a>
</body>
</html>
· 无样式字体闪现
在加载网站字体的时候，若还没有加载出目标字体，浏览器会先用一个备用字体显示内容，等所需字体加载完成后，再替换备用字体，导致字体会有一个突然变化。
一个好一些的解决方式(无法根除)是设置字体的显示方式font-display: optional，在一个时间段内没有加载好新字体，就不加载新字体了，使用备用字体，浏览器后台会继续下载字体，直到下载完成并保存，下次打开页面的时候，就可以使用新字体了
@font-face {
font-family: 'opensans';
src: url('fonts/opensans/opensans-regular-webfont.woff2') format('woff2'),
url('fonts/opensans/opensans-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: optional;
}
· 字体服务
使用谷歌字体服务
· 系统字体栈
系统字体栈是各个系统默认的字体的集合，使用系统字体栈的好处是不用下载字体，坏处是，显示效果不统一，不同系统打开你的网站看到的效果可能就不一样。在苹果系统中，使用font-family: -apple-system xxxx(自动补全)，就可以调出系统字体栈，其他系统替换掉apple为指定系统名就可以
· 字体大小
在设置字体大小时，最好不直接使用px，而是使用 rem，不同显示设备的分辨率不一样，使用px后，文字在分辨率低的设备上看着正好，但在分辨率高的设备上，可能看着就小了，所以使用rem是很好的选择。
rem是与根字体大小有关的，在使用时，可能是1.5rem，浏览器默认字体大小通常是16px(不同系统可能不一样)，在使用1.5rem时，想知道时多少像素，就有点难计算了，这个时候可以修改一下根字体大小，方便计算，当然也可以不修改，口算好的可以硬算
html {
/* 62.5% x 16px = 10px */
font-size: 62.5%;
}
· 垂直空间
- 相关联的内容在排版时应该更接近，比如每段文字的Heading应该更接近相关的内容，远离不相关的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0.5rem;
font-family: 'Courier New', Courier, monospace;
font-size: 1rem;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, 'Times New Roman', Times, serif;
}
h1 {
margin: 3rem 0 1rem;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea delectus quos officiis dicta quisquam nemo neque assumenda velit sapiente laborum, voluptate illo quas tempore rem eveniet, facere veniam dolore corporis ducimus porro omnis explicabo fugiat natus. Dolorum, repellat facilis, beatae earum rem dolor expedita incidunt, quisquam ea neque repellendus consectetur?</p>
<h1>Heading 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat modi libero sit eveniet molestias, nobis neque beatae eligendi dignissimos molestiae veniam officia, ducimus hic laborum! Quam et architecto molestias reprehenderit dignissimos nemo consequatur minima praesentium reiciendis unde asperiores possimus ratione rerum corporis at id explicabo beatae alias expedita, dolor quos.</p>
</body>
</html>
image.png
- 行高
行高使用line-height设置，通常行高可以设置成字体大小的1.5倍line-height: 1.5，但也要根据具体情况调整
· 水平空间
- 字符间距
字符间距使用letter-spacing设置，通常使用px作为单位，根据具体情况调整间距，合适就好 - 词间距
词间距使用word-spacing设置，通常使用px作为单位，根据具体情况调整间距，合适就好，通常一行显示50-70个字符为佳。这个时候，使用ch作为段落的宽度可能更合适，1ch表示一个“0”字符的宽度
p {
width: 50ch;
}
· 文字排版
文字对齐
text-align，可以是左对齐left，右对齐right，两端对齐justify或者是居中对齐center文字缩进
text-indent，通常在段落开头使用，并用rem为单位文字样式
text-decoration，如下划线underline，删除线line-through等文字转换
text-transform，如转换大写uppercase等换行控制
white-space， 如换行wrap，不换行nowrap
换行控制通常会有截断文字的需求
/* 不换行截断文字示例 */
p {
/* 需要设置宽度 */
width: 50ch;
/* 设置不换行 */
white-space: nowrap;
/* 超出边界就隐藏 */
overflow: hidden;
/* 超出的文字显示省略号 */
text-overflow: ellipsis;
}
/* 换行截断文字示例 */
p {
/* 需要设置宽度 */
width: 50ch;
/* 设置不换行 */
white-space: wrap;
/* 超出边界就隐藏 */
overflow: hidden;
/* 超出的文字显示省略号 */
text-overflow: ellipsis;
/* 3行之后就截断 */
line-clamp: 3;
}
- 文字分栏显示
文字分栏使用3个属性完成
/* 分几栏 */
column-count: 2;
/* 每栏之间的间隙 */
column-gap: 2rem;
/* 每栏之间的分隔线 */
column-rule: 3px dotted lightgray;
如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
margin: 0.5rem;
font-family: 'Courier New', Courier, monospace;
font-size: 1rem;
/* 字符间距，通常使用px */
letter-spacing: 0.5px;
/* 词间距，通常使用px */
word-spacing: -5px;
}
h1, h2, h3, h4, h5, h6 {
font-family: Georgia, 'Times New Roman', Times, serif;
}
h1 {
margin: 3rem 0 1rem;
}
p {
width: 100ch;
/* 分几栏 */
column-count: 2;
/* 每栏之间的间隙 */
column-gap: 2rem;
/* 每栏之间的分隔线 */
column-rule: 3px dotted lightgray;
}
</style>
</head>
<body>
<h1>Heading 1</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea delectus quos officiis dicta quisquam nemo neque assumenda velit sapiente laborum, voluptate illo quas tempore rem eveniet, facere veniam dolore corporis ducimus porro omnis explicabo fugiat natus. Dolorum, repellat facilis, beatae earum rem dolor expedita incidunt, quisquam ea neque repellendus consectetur?</p>
<h1>Heading 2</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat modi libero sit eveniet molestias, nobis neque beatae eligendi dignissimos molestiae veniam officia, ducimus hic laborum! Quam et architecto molestias reprehenderit dignissimos nemo consequatur minima praesentium reiciendis unde asperiores possimus ratione rerum corporis at id explicabo beatae alias expedita, dolor quos.</p>
</body>
</html>
image.png
- 文字方向
direction控制文字方向，可以从左到右ltr，也可以从右到左rtl
下一篇
H5 Mosh教程笔记 - 图片简介
上一篇
H5 Mosh教程笔记 - 排版简介
