对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: 3; /* 最多显示3行文本 */
}

兼容：

.container {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  
  /* 兼容 Firefox */
  display: -moz-box;
  -moz-box-orient: vertical;
  -moz-line-clamp: 2;
}

/* 兼容 Safari 和 Chrome */
.container::after {
  content: "";
  display: block;
  height: 1em;
  margin-top: -1em;
  visibility: hidden;
}

或

p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}

需要注意的是，text-overflow的省略效果在IE浏览器中可能无效。为了兼容性，可以使用JavaScript来动态计算文本长度，判断是否溢出进行处理。

JS 实现方式：

方案1: 使用了-webkit-line-clamp属性和一些额外的CSS样式来实现多行文本溢出省略效果。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .container {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      /* 设置最大行数 */
      -webkit-line-clamp: 3; /* 显示3行 */
      /* 兼容 Firefox */
      display: -moz-box;
      -moz-box-orient: vertical;
      -moz-line-clamp: 3;
      /* 兼容 Safari 和 Chrome */
      position: relative;
      max-height: calc(1.2em * 3); /* 每行高度乘以行数 */
      line-height: 1.2em; /* 行高 */
  }
  </style>
  <title>多行文本溢出省略效果</title>
</head>
<body>
  <div class="container">
    1、既能学会沉下心来专注做好一件事，也能学会用巧力做成事，而不是只会用蛮力做事的思维；2、学会多做利人利己的事情的思维，而不是做各种损人不利己或者既损人也不利己的事情的思维，因为做人做事最好的结果就是双赢；3、学会灵活变通的思维，而不是一条路走到黑的思维，更不是不撞南墙不回头的思维；4、学会打造自己的差异化，唯一性，能与别人做差异化竞争，而不要使自己陷入恶性竞争的境地；5、养成让别人愿意主动来找你合作或者接触的魅力，摆脱一直以来都是你去求着别人给你合作的机会的困境；6、养成看到任何事情，任何人，第一反应都是想“我能从中学到什么，我能从中避免什么”的思维习惯，而不是这个看不惯，那个不喜欢，或者内心毫无波澜，毫不关心外界的一切人和事物的态度；更不能养成眼里只有嫉妒恨的不好的情绪；7、遇到任何问题，都要养成一种会分析问题和解决问题的思路习惯，比如这个问题是不是必须要解决？也没有其他的达成目的的解决办法？如果不得不解决的话该怎么做？需要寻求什么帮助？等等；你会发现这一系列问题下来，思路都会清晰了，而不是一遇到问题，只知道一味地逃避或者有畏难情绪，再或者习惯性抱怨；
  </div>
  <script>
    // 检查是否需要添加后缀以实现省略
    function checkEllipsis() {
      var container = document.querySelector('.container');
      if (container.scrollHeight > container.clientHeight) {
        container.classList.add('with-ellipsis');
      }
    }

    window.onload = checkEllipsis;
    window.onresize = checkEllipsis;
  </script>
</body>
</html>

在上述示例中，我们使用了-webkit-line-clamp属性和一些额外的CSS样式来实现多行文本溢出省略效果。然后，通过JavaScript中的checkEllipsis函数，在页面加载和大小变化时检查文本是否需要添加省略号。如果需要，就会给容器元素添加一个.with-ellipsis类，这个类会触发省略的效果。

这种方法可以在不同浏览器中很好地工作，但请注意，在一些旧版本的浏览器中可能不支持-webkit-line-clamp属性，因此需要根据实际情况进行兼容性测试和调整。

方案2: 使用了原生 JavaScript 来计算元素的实际高度，并根据需要截断文本。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .ellipsis-text {
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 3; /* 显示行数 */
    }
  </style>
  <title>多行文本的省略效果</title>
</head>
<body>
  <div class="ellipsis-text">
    1、既能学会沉下心来专注做好一件事，也能学会用巧力做成事，而不是只会用蛮力做事的思维；2、学会多做利人利己的事情的思维，而不是做各种损人不利己或者既损人也不利己的事情的思维，因为做人做事最好的结果就是双赢；3、学会灵活变通的思维，而不是一条路走到黑的思维，更不是不撞南墙不回头的思维；4、学会打造自己的差异化，唯一性，能与别人做差异化竞争，而不要使自己陷入恶性竞争的境地；5、养成让别人愿意主动来找你合作或者接触的魅力，摆脱一直以来都是你去求着别人给你合作的机会的困境；6、养成看到任何事情，任何人，第一反应都是想“我能从中学到什么，我能从中避免什么”的思维习惯，而不是这个看不惯，那个不喜欢，或者内心毫无波澜，毫不关心外界的一切人和事物的态度；更不能养成眼里只有嫉妒恨的不好的情绪；7、遇到任何问题，都要养成一种会分析问题和解决问题的思路习惯，比如这个问题是不是必须要解决？也没有其他的达成目的的解决办法？如果不得不解决的话该怎么做？需要寻求什么帮助？等等；你会发现这一系列问题下来，思路都会清晰了，而不是一遇到问题，只知道一味地逃避或者有畏难情绪，再或者习惯性抱怨；
  </div>
  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      truncateText();
    });

    window.onresize = function() {
      truncateText();
    };

    function truncateText() {
      var elements = document.querySelectorAll('.ellipsis-text');
      for (var i = 0; i < elements.length; i++) {
        var element = elements[i];
        var lineHeight = parseInt(window.getComputedStyle(element).lineHeight);
        var maxHeight = lineHeight * 3; // 显示三行
        if (element.scrollHeight > maxHeight) {
          var text = element.innerHTML;
          while (element.scrollHeight > maxHeight) {
            text = text.replace(/\s+\S*$/, ''); // 移除最后一个单词
            element.innerHTML = text + '...';
          }
        }
      }
    }
  </script>
</body>
</html>

在这个示例中，我们使用了原生 JavaScript 来计算元素的实际高度，并根据需要截断文本。这段代码应当能够在大多数浏览器中正常工作，包括 Firefox 和 Safari。

持续学习总结记录中，回顾一下上面的内容：

了解 px、rpx、em、rem、vw 和 vh 单位意义：

• px：像素，是相对于显示器屏幕分辨率而言的，是固定单位。
• rpx：小程序中使用的相对长度单位，可以根据屏幕宽度进行自适应换算。
• em：相对长度单位，相对于父元素的字体大小来决定自身的大小。
• rem：相对长度单位，相对于根元素（html 元素）的字体大小来决定自身的大小。
• vw：视窗宽度的百分比，1vw 等于视窗宽度的 1%。
• vh：视窗高度的百分比，1vh 等于视窗高度的 1%。

px 和 em 的区别在于：

• px 是固定单位，不会随着其他元素的改变而改变，而 em 是相对单位，其大小会相对于父元素的字体大小而改变。

字体相关知识：

• 在网页中，字体通常使用 "font-family" 属性来指定。
• 字体样式可以使用 "font-style" 属性来设置为斜体、正常等。
• 字体粗细可以使用 "font-weight" 属性来设置。

在网页中使用奇数还是偶数的字体？

• 一般情况下，推荐使用偶数的字体大小，因为某些浏览器可能对奇数像素的字体渲染支持不够好，会导致显示效果不佳。

自定义字体的使用场景：

• 自定义字体适合用于个性化设计，例如公司 logo、特定标题等。通过 @font-face 可以引入自定义字体文件，并在样式表中使用。

实现小于12px的字体效果：

• 可以使用小于 12px 的字体大小，但需要考虑到可读性和兼容性。可以尝试使用相对单位如 em 或 rem，或者使用 vw 单位来实现相对于视口宽度的字体大小。

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

• 可以使用 CSS 属性 "text-overflow: ellipsis;" 来实现文本溢出时显示省略号。
• 配合 "white-space: nowrap;" 可以让文本不换行。
• 为了增加兼容性，可以结合使用 "-webkit-line-clamp" 和 "-webkit-box-orient" 实现在 WebKit 内核浏览器上的多行文本溢出省略效果。