对px、rpx、 em、rem、vw、vh 的了解，px 和 em 的区别？在网页中的使用奇数还是偶数的字体?自定义字体的使用场景？如何实现小于12px的字体效果？实现多行文本溢出省略效果，考虑兼容性

vw、vh 是什么？

px是最常用的单位，rpx用于小程序中的自适应布局，em和rem用于相对于父元素和根元素的字体大小，vw和vh用于相对于视窗宽度和高度的单位。

• px: 像素（Pixel）是最常用的单位，屏幕上最小的显示单位。它表示相对于显示设备的屏幕分辨率的一个点。在CSS中，以px为单位表示元素的长度或宽度。px是绝对单位，不会随着屏幕尺寸的变化而改变。px单位在各种浏览器和设备上都能很好地兼容，但是在不同的屏幕分辨率下可能会导致页面显示不一致。

• rpx（响应式像素）: 是小程序中的单位，用于实现在不同设备上的自适应布局。在 iphone6 中 1px = 2rpx，整个页面有750rpx，可以根据屏幕宽度的变化而自适应缩放。。在小程序中，屏幕宽度被分成750rpx，因此1rpx等于屏幕宽度的1/750。rpx单位只在小程序中有效，在Web开发中并不常用。

• em: 是相对单位，它相对于父元素的字体大小。如果一个元素的字体大小为2em，表示该元素的字体大小是父元素字体大小的2倍。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。em单位常用于实现相对于父元素的动态字体大小。

• rem：是相对于根元素（即html元素）的字体大小的单位。与em不同，rem的参考点是固定的，即html元素的字体大小。如果html元素的字体大小为16px，那么1rem等于16px。rem单位常用于实现相对于根元素的动态字体大小。与em相比，rem更容易控制和调整。

• vw/vh: vw（viewport width）和vh（viewport height）是视窗宽度和高度的百分比单位。视窗是指浏览器窗口的可见区域，1vw相当于视窗宽度的1%，1vh相当于视窗高度的1%。这种单位可以使元素根据视窗尺寸自适应缩放。例如，如果视窗宽度为1000px，那么1vw等于10px。vw单位常用于实现响应式布局，根据视窗的宽度进行调整。，如果视窗高度为800px，那么1vh等于8px。vh单位常用于实现根据视窗高度进行调整的效果。用postcss自动实现适配。vw 和 vh 是 CSS3 新单位。

px 和 em 的区别

px（像素）和em是用于描述网页上元素尺寸的单位。它们之间的区别在于它们的基准点不同。

px（像素）
是一个绝对单位，表示像素大小,不会根据字体大小而改变。

它基于屏幕的物理像素。px是一个固定不变的长度单位。

屏幕上的每个像素都是一个独立的点，可以显示不同的颜色和亮度。

在CSS中，px通常用于指定元素的精确尺寸。例如，如果将一个元素的宽度设置为200px，则它将在屏幕上占据200个物理像素的宽度。

px单位在网页布局中非常常用，特别是当需要确切控制元素的尺寸时。px更适合用于布局和长度设置，如图片大小等。

em
是一个相对单位，em是相对单位，相对于元素本身的字体大小，如果字体大小改变，em也会随之改变。

例如，如果一个元素的字体大小设置为1em，那么它将与其父元素的字体大小相同。如果父元素的字体大小为16px，那么1em将等于16px。如果父元素的字体大小为20px，那么1em将等于20px。

em单位在网页排版中非常有用，因为它可以根据父元素的字体大小自动调整元素的尺寸。em更适合用于字体大小设置，可以实现响应式。如果将字体大小设置为em，那么随着屏幕尺寸或字体大小的改变，文本也能自动适应。

总结：

• px是绝对单位，em是相对单位。
• px基于物理像素，em基于字体大小。
• px适用于需要精确控制尺寸的情况，em适用于根据字体大小自动调整尺寸的情况。
• px无法实现自动缩放,需要通过媒体查询等手动设置不同尺寸下的样式。em可以实现内容根据浏览器缩放自动适应,实现一定程度的响应式。
• 使用哪种单位取决于具体的需求和设计考虑。

字体相关的知识

以下是几个常用的CSS属性：

• font-family: 用于设置字体的名称或字体族名，可以指定多个字体备选，浏览器会按照顺序依次查找可用的字体。

• font-size: 设置字体大小，可以使用像素（px）或相对单位（如em）进行设置。

• font-weight: 设置字体的粗细程度，常用值有normal（默认）、bold（加粗）。

• text-overflow: 控制文本溢出时的显示方式，常用值有clip（剪切）和ellipses（省略号）。

在网页中的应该使用奇数还是偶数的字体?为什么呢?

偶数字号相对更容易和 web 设计的其他部分构成比例关系。

一般来说，在网页设计中使用偶数字体更佳。理由如下:

• 偶数字体与其他元素的比例关系更容易构成整体比例关系。例如使用14px正文字号,边距可以设计为14px的一半即7px。这种比例关系更易观看。

• 大多数设计图与原型都是使用偶数字体制作的,使用偶数字体更容易与设计保持一致。

• 偶数字体在排版上看起来更整齐规整。

• 大多数浏览器的基础字号也是偶数字,使用偶数字体更容易与浏览器默认样式契合。

• 相比奇数字体,偶数字体在不同分辨率下的显示效果更稳定清晰。

总的来说，在网页设计中使用偶数字体更符合视觉规律，与其他元素的比例关系也更好，是一种较佳的做法。但这不意味着奇数字体不能使用，只是偶数字体在综合各方面来看优势更大。使用奇数字体大小在视觉上可能更有吸引力和易读性，但最终选择字体大小仍然取决于设计师的审美观和具体的设计需求。

自定义字体的使用场景

宣传/品牌/ banner 等固定文案 字体图标…

系统自带字体不满足需求
如果系统默认安装的字体无法满足项目的设计或内容需求,可以使用自定义字体来替代。例如需要使用特殊字体来体现品牌风格。

需要支持多国语言
如果产品需要支持中文、日文等多种语言,系统字体可能无法同时支持所有语言,此时可以使用自定义多语言字体集。

界面或内容需要特殊字体效果
比如为了区分标题和正文,需要将标题设置为粗体或斜体效果。或者需要为表格或代码使用等宽字体。这时就需要使用自定义设置不同样式的字体。

网页或APP需要定制风格
通过自定义网页或APP使用的字体类型和风格,可以帮助产品形成独特的视觉识别和设计风格。

电子表格或图表渲染需要特定字体
如果表格或图表中的文字需要使用特定字体来实现最佳排版效果,也可以使用自定义字体来满足。

以上仅概括了一些常见使用场景，具体情况需要结合产品和内容需求来确定是否需要使用自定义字体以及如何使用。

如何实现小于12px的字体效果？

1.使用transform: scale()缩小元素来缩小字体大小。例如transform: scale(0.8)可以实现小于12px的效果。

transform: scale(0.8);

2.为文字元素添加display: inline-block属性，然后使用transform: scale()来缩小。

3.使用-webkit-text-size-adjust: none属性禁止浏览器自动调整字体大小。

4.将文字放在一个div里，然后对div设置小于12px的字体大小。浏览器会读取div的字体大小进行缩放。

5.使用SVG格式定义文字，可以实现比浏览器限制更小的字体大小。

6.设置font-size为em或rem值，因为这些相对单位不受限制。

实现多行文本溢出省略效果，考虑兼容性

CSS 实现方式

单行：

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;

多行：

{
   
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 使用省略号表示溢出 */
  display: -webkit-box; /* 使用旧版WebKit内核浏览器的弹性盒模型 */
  -webkit-box-orient: vertical; /* 垂直弹性盒模型 */
  -webkit-line-clamp:</