网页设计文字上调 第1篇
将需要使用的字体文件下载后放在服务器上，用 @font-face 将字体文件作为一个资源应用到 CSS 文件。
为了兼容不同浏览器需要准备多种字体格式文件，字体格式文件与浏览器的兼容情况：
.ttf / .otf
.woff
IE9+,。
.eot
IE4+ 专用。
.svg
主要针对 Safari 做兼容。
网页设计文字上调 第2篇
如果项目中只是少量地方使用特殊字体，可以考虑切图，导出 .svg 格式（比 .png 更清晰）导出前，将文本轮廓化，使文字变成形状，不然可能会导致 svg 内部字体失效，如下图：
用 font-family 的属性引用不可商用的字体，并且网页中也能显示这种字体，不会构成侵权问题，也不需要进行额外的授权许可。因为能够用 font-family 引用成功的字体是用户系统内本身就存在的字体。
但这只限于在电脑中显示，如果对网页截下来的图片用于宣传，就脱离了电脑系统的范围，这时没有购买字体版权的话就属于侵权。
使用 @font-face 需要将字体文件下载后上传项目或服务器引用，使页面显示字体不再依赖用户系统自带字体，这时如要使用到不可商用的字体，需要购买字体版权，否则就属于侵权。
设定字体字重的属性 font-weight 的值可以使用短语或者数字（权重级别），短语有效值为 normal 和 bold，数字的有效值为 100-900。
短语的 normal 对应数字的 400，也就是设计软件中常见到的“常规体“，bold 对应 700。
浏览器在渲染字体的时候，会从字体中找到对应的权重级别进行渲染，但并不是每个字体都有 100-900 的权重级别，有些字体只提供 normal 和 bold 两种字重，就拿常见的 Arial 和 Noto Sans（思源黑体）中西文混合举例：
上图看起来西文字体会比中文字体更粗一些，在设计软件内设置字体为“中粗体”，那么 font-weight 的值就为 500。
由于西文 Arial 只有 normal 和 bold 两种字重，500 的权重级别大于了 normal 对应的 400，所以显示了 bold(700)，而 Noto Sans (思源黑体)字体提供了对应 500 的中粗体，因此出现了中西文字体的字重不统一。
网页设计文字上调 第3篇
Grid布局可以通过设置align-self属性来控制网格项的垂直对齐方式。
.grid-container {
display: grid;
}
.grid-item {
align-self: start; /* Align item to the top */
}
通过设置align-self: start，网格项内的文字会被上移到网格单元格的顶部。
网页设计文字上调 第4篇
内边距（padding）可以用于调整元素内部的空间，通过设置负的上内边距（padding-top: -value）可以实现文字的上移。
.text-padding {
padding-top: -5px; /* Negative top padding to move text up */
}
This is a sample text.
在这个例子中，通过设置负的上内边距，文字会被上移。
网页设计文字上调 第5篇
OPPO Sans
会发现在 Rendered Fonts 中显示 TencentSans 和 OPPO Sans 为 Network resource，不同于知乎和爱奇艺渲染出的字体为 Local file。
因为特定字体除非用户主动下载安装，并不能确保存在于所有用户的电脑内，仅仅用 font-family 引用，未安装字体的电脑都无法渲染出来。
网页设计文字上调 第6篇
将文字上移的需求在各种应用场景中都可能出现，例如：
在使用这些方法时，有几点需要注意：
通过合理使用CSS属性、调整内边距、相对定位等方法，可以灵活地将文字上移，满足不同的设计需求。
1. 如何在HTML中将文字上移？在HTML中，可以使用CSS来控制文字的位置。要将文字上移，可以使用CSS属性margin-top或padding-top来调整文字与其容器之间的空间。通过增加负值的margin-top或padding-top，可以将文字向上移动。
2. 如何使用CSS调整文字的垂直位置？要调整文字的垂直位置，可以使用CSS属性vertical-align。通过设置不同的vertical-align值，例如top、middle或bottom，可以将文字相对于其容器的垂直位置进行调整。
3. 如何在HTML中实现文字浮动效果？要在HTML中实现文字浮动效果，可以使用CSS属性float。通过将文字的float属性设置为left或right，可以使文字浮动在其容器的左侧或右侧。这样可以使其他元素环绕文字，实现文字上移的效果。同时，还可以使用clear属性来控制文字浮动后的布局效果。
网页设计文字上调 第7篇
vertical-align属性可以控制内联元素的垂直对齐方式。常见的取值包括top、middle、bottom等。
.text-top {
vertical-align: top;
}
This is a sample text.
在这个例子中，sample文字将会被上移到行的顶部。
line-height属性用于设置行高，通过调整行高可以改变文字在行内的垂直位置。
.text-up {
line-height: ; /* Smaller line height to move text up */
}
This is a sample text.
通过设置较小的line-height值，文字会在行内向上移动。
网页设计文字上调 第8篇
由于中文字体内都包含西文字体，如想优先显示效果较好的西文字体，需要将西文字体写在中文字体的前面。
虽然用户群体中使用 Windows 系统较多，但 Mac 用户大部分会下载 Office，所以会存在许多 Windows 下常见的字体，比如微软雅黑。将 macOS 系统的字体写在 Windows 的前面，可以保证在对应平台显示更好的效果。
先了解 serif（衬线体）与 sans-serif（无衬线体）
衬线体与无衬线体是两种最基础的字形分类，衬线体在笔画开始与末端的地方有像小三角的装饰。
衬线体更多使用在印刷品上，在纸张上有棱角的字体更容易被识别。而在屏幕显示中字体过多的装饰点缀容易造成视觉疲劳，所以在屏幕显示中更多使用无衬线体。
一些常见常用的字体：
网页设计文字上调 第9篇
Flexbox布局可以通过设置align-items属性来控制子元素的垂直对齐方式。
.flex-container {
display: flex;
align-items: flex-start; /* Align items to the top */
}
在这个例子中，通过设置align-items: flex-start，容器内的文字会被上移到顶部。