文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

Web正文字体发展简史

英文原文：https://frontendfoc.us/link/82281/web 授权译者：ConardLi 当你正在纠结选择什么样的字体大小，尤其是在您尝试适应不同的屏幕和场景时。...我没有检验该假设所需的技能，但我会对很大的文本趋势保持警惕。 就我个人而言，我更喜欢对字体大小进行有限的调整。...然后，根据我使用的字体、我想要的外观以及我在各种设备上测试的结果，我调整这些值。 对于我们一直在追逐设备制造商，操作系统和浏览器开发人员，并试图每两年调整字体大小以适应市场上的情况，我也感到难过。...特别是硬件供应商更有兴趣销售针对视频分辨率(1080p、4K)进行优化的屏幕，即使它会让整个 UI 变得非常小。 从理论上讲，浏览器制造商应该能够改变 16px 的默认字体大小以适应现代设备。...所以，我们猜测;我们测试;我们调整： 无论在技术上是正确的还是近似的(我自己的计算显示分辨率为68dpi)，72dpi分辨率允许设计师轻松地将点大小转换为像素大小。

1.7K10
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    解密CSS单位：px、em、vh的区别与应用

    当需要调整元素大小时，只需更改父元素的字体大小，所有基于 “em” 单位的子元素大小都会相应地调整，减少了代码量和维护成本。...vh单位 “vh” 单位是相对于视口（Viewport）高度的百分比单位，即1vh等于视口高度的1%。它通常用于移动端设计中，以确保元素的大小和位置可以根据视口的大小自动调整。...以下是 “vh” 单位在移动端设计中的应用以及实现全屏布局效果的方法： 在移动端设计中的应用： 字体大小： 使用 “vh” 单位可以确保字体大小随着视口大小的变化而调整，以适应不同大小的移动设备。...元素尺寸： 可以使用 “vh” 单位设置移动端元素的尺寸，例如按钮、图片等，以确保它们在不同屏幕尺寸下都能够适应并保持一致的比例。...一个 rem 等于根元素的字体大小。 特点： rem 单位的大小不会受到父元素字体大小的影响，只会受根元素字体大小的影响。 适用于需要相对于整个页面布局进行调整的情况。

    93510

    如何设置字体大小？我们可以使用哪些单位来修改字体大小呢？

    在我们写网页的过程中，常常需要修改字体大小，那么我们有什么方法修改字体大小呢?所以，这期文章（文案）我们讲解以下问题，问题一:如何设置字体大小?问题二：我们在修改字体时，可以使用哪些单位？...相对单位如em和rem可以根据父元素或根元素的字体大小进行相对缩放，从而在不同大小的屏幕上提供更好的阅读体验。3....不符合网页设计原则：网页设计通常推荐使用相对单位，因为它们能够更好地适应不同用户的默认字体设置和屏幕分辨率。使用绝对单位可能会破坏这种适应性，导致用户体验不佳。4....难以维护：在响应式设计中，使用绝对单位设置字体大小会增加维护的难度。当需要调整布局以适应不同的屏幕尺寸或设备时，使用相对单位可以更容易地进行全局调整。5....无法利用浏览器的自动调整功能：浏览器提供了一些自动调整字体大小的功能，以改善用户的阅读体验，例如用户可能会根据自己的视力情况调整浏览器的默认字体大小。如果使用绝对单位，这些功能将无法发挥作用。6.

    1.2K10

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    【这就导致如果屏幕太大或者太小都会导致元素无法正常显示】 2、设计方法：使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域 (viewport) 和父元素的实时尺寸进行调整，尽可能的适应各种分辨率...改变屏幕分辨率可以切换不同的静态局部（页面元素位置发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。可以把自适应布局看作是静态布局的一个系列。...2、使用 em 或 rem 单位进行相对布局，相对%百分比更加灵活，同时可以支持浏览器的字体大小调整和缩放等的正常显示，因为em是相对父级元素的原因没有得到推广。...但是，如果从网站易用性方面考虑，字体大小应该是可变的，一些视力不是那么好的人需要放大字体才能看得清页面内容。然而，占据大部分浏览器市场的IE无法调整那些使用px作为单位的字体大小。...5、用em/rem定义尺寸的另一个好处是更能适应缩进/以字体单位padding或margin／浏览器设置字体尺寸等情况（因为em/rem相对于字体大小，会同步改变）。

    12.8K33

    移动端布局方案

    ，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。...通过获取屏幕实际宽度动态的设置 html 的字体大小，1rem = html 的字体大小像素(font-size)。...计算方式实际上与百分基本一致，不过多了一个优势，就是参照系没有百分比那么复杂 vh/vw 布局优点 纯 CSS 移动端适配方案，不存在脚本依赖问题 相对于 rem 以根元素字体大小的倍数定义元素大小，逻辑清晰简单...以常用的 750px 设计稿尺寸为例，假设设计稿的某个字体大小是 40px，换算成 vw 单位大小应该为 （40 / 750）* 100vw = 5.33333vw。...，以利用 @media 规则为主要手段，而自适应则忽略@media 以比例布局为主，目的是适应不同的浏览器窗口大小 移动端图片处理 指定图像宽度时使用相对单位，防止意外溢出视口，如 width: 50%

    1.4K10

    前端工程师之移动端布局方案

    ，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。...通过获取屏幕实际宽度动态的设置 html 的字体大小，1rem = html 的字体大小像素(font-size)。...计算方式实际上与百分基本一致，不过多了一个优势，就是参照系没有百分比那么复杂 vh/vw 布局优点 纯 CSS 移动端适配方案，不存在脚本依赖问题 相对于 rem 以根元素字体大小的倍数定义元素大小，逻辑清晰简单...以常用的 750px 设计稿尺寸为例，假设设计稿的某个字体大小是 40px，换算成 vw 单位大小应该为 （40 / 750）* 100vw = 5.33333vw。...，以利用 @media 规则为主要手段，而自适应则忽略@media 以比例布局为主，目的是适应不同的浏览器窗口大小 移动端图片处理 指定图像宽度时使用相对单位，防止意外溢出视口，如 width: 50%

    1.3K10

    前端架构师之路02_移动端布局方案

    ，在大屏手机或横竖屏切换场景下可能会导致页面元素被拉伸变形，字体大小无法随屏幕大小发生变化。...通过获取屏幕实际宽度动态的设置 html 的字体大小，1rem = html 的字体大小像素(font-size)。...，不过多了一个优势，就是参照系没有百分比那么复杂 vh/vw 布局优点 纯 CSS 移动端适配方案，不存在脚本依赖问题 相对于 rem 以根元素字体大小的倍数定义元素大小，逻辑清晰简单，视口单位依赖于视口的尺寸...以常用的 750px 设计稿尺寸为例，假设设计稿的某个字体大小是 40px，换算成 vw 单位大小应该为 （40 / 750）* 100vw = 5.33333vw。...，以利用 @media 规则为主要手段，而自适应则忽略@media 以比例布局为主，目的是适应不同的浏览器窗口大小 移动端图片处理 指定图像宽度时使用相对单位，防止意外溢出视口，如 width: 50%

    1.1K10

    如何克服响应式布局的不足之处

    摘要 本文讨论了响应式布局在网页设计中的不足及其克服方法。尽管响应式布局能够自动调整布局以适应不同屏幕尺寸，但在实际应用中仍存在页面加载速度慢、内容可读性和可用性下降以及用户体验上的不便等问题。...文章提出了通过优化CSS代码、延迟加载资源、使用矢量图形和字体、调整字体大小和行距、增大点击区域、采用合适的交互模式以及进行测试和优化等方法来克服这些不足，以提供更优质的用户体验。...矢量图形和字体可以根据屏幕尺寸进行无损的缩放，而不会失真。相比之下，使用位图图像可能会导致图片失真，并且加载时间较长。 其次，使用合适的字体大小和行距。...在小屏幕上，文字大小和行距应当适当增大，以提高可读性。可以使用CSS的媒体查询来针对不同屏幕尺寸设定不同的字体大小和行距。 此外，响应式布局可能会导致用户体验上的不便。...综上所述，虽然响应式布局在提供多设备适应性方面有一些不足之处，但通过优化CSS代码、延迟加载资源、使用矢量图形和字体、合适的字体大小和行距、增大点击区域以及使用合适的交互模式，并进行测试和优化，我们可以克服这些不足

    63110

    H5 App实战进阶十三：H5 App的响应式设计与适配多屏幕

    本文将深入探讨响应式设计的原则、工具和技术，并通过实例展示如何在H5 App中实现多屏幕适配。核心内容1. 响应式设计原则灵活性：布局应能够根据不同屏幕尺寸和分辨率进行自适应调整。...响应式布局技术弹性盒模型（Flexbox）：允许容器内的元素以灵活的方式排列，适应不同的屏幕尺寸。网格布局（Grid Layout）：提供一个二维布局系统，使内容能够按行和列进行组织。...元素：允许为不同的屏幕尺寸和像素密度提供不同的图片资源。视频响应式处理：使用CSS和JavaScript确保视频在不同设备上都能正确播放。4....响应式字体与排版相对单位：使用em, rem等相对单位来定义字体大小，使其能够相对于根元素或父元素进行缩放。流体排版：根据视口大小动态调整字体大小，以保持内容的可读性。示例：构建一个响应式导航栏较大屏幕上水平排列。

    2.2K10

    响应式网页设计：使用媒体查询、视口单元和流体布局的技术

    ，从而在较大的设备上提供更好的阅读体验。...视口单位 视口单位是相对单位，可以轻松创建可扩展的设计。它们包括 vw（视口宽度）和 vh（视口高度），它们是视口尺寸的百分比。这些单位对于设置适应视口大小的尺寸和间距特别有用。...流体布局 流体布局 使用百分比等相对单位而不是像素等固定单位，允许元素按其容器的比例调整大小。这种技术可确保布局无缝适应不同的屏幕尺寸。...随着屏幕宽度的增加，项目的大小会调整为占据容器的 48%，然后是 31%，从而创建响应式网格布局。...使用 clamp() 实现响应式字体大小 使用clamp()函数可以创建流畅的排版，可以在不同的屏幕尺寸上平滑调整。 clip() 函数采用三个值：最小值、首选值和最大值。

    1.1K10

    实现不同分辨率下字体大小自适应的原理是什么？

    不同分辨率下字体大小自适应的实现原理主要基于响应式设计思想和CSS 特性，核心是让字体大小能够根据设备屏幕的分辨率（或视口宽度）自动调整，从而在不同尺寸的设备上保持良好的可读性和视觉比例。...基于视口单位的动态计算CSS 提供了与视口相关的单位，可直接根据屏幕宽度动态调整字体大小：​​vw​​（viewport width）：视口宽度的 1%（例如 ​​font-size: 1vw​​ 表示字体大小为屏幕宽度的...CSS 规则，手动定义各分辨率下的字体大小，实现“阶梯式”自适应。...UI 框架的主题变量联动（以 Ant Design 为例）Ant Design 的组件样式基于 Less 变量开发，其中 ​​@font-size-base​​ 是控制全局字体大小的基准变量（默认 14px...总结核心原理是将字体大小与屏幕分辨率（或视口宽度）绑定，通过以下方式实现自适应：利用 CSS 视口单位（​​vw​​）实现比例缩放用媒体查询设置不同断点的固定字体大小（阶梯式适配）结合 UI 框架的主题变量

    43010

    【前端】CSS字体相关属性详解

    设计注意事项 字体优先级顺序：font-family 属性通常指定多个字体，以确保页面在不同设备和操作系统中都能得到正确的显示。当第一个字体不可用时，浏览器会按顺序查找列表中的下一个字体。...字体大小的单位 px（像素）：最常见的单位，也是最精确的单位，可以让字体在各个浏览器中看起来一致。 em 和 rem：相对单位。em 依赖于父元素的字体大小，而 rem 则依赖于根元素的字体大小。...百分比（%）：可以将字体大小设置为父元素字体大小的一个百分比。这样做可以让字体大小随页面的整体调整而变化。 vw 和 vh：视口单位。...适应不同设备：在设计响应式网页时，使用相对单位（如 em 或 rem）可以帮助确保字体大小在不同设备上自适应调整，增强用户体验。...相对单位的使用：在需要响应式布局的页面中，使用 em 或 rem 等相对单位来定义字体大小，确保字体在不同的设备上能够自适应。

    76810

    【CSS】深入探讨 CSS 的 `calc()` 函数

    必须注意操作符与数值之间至少有一个空格（加减乘除前后都要有空格），否则浏览器无法正确解析。3. 支持的运算和单位支持 +, -, *, / 运算符。...child { position: absolute; left: calc(50% - 100px); width: 200px;}php75 Bytes© 菜鸟-创作你的创作5.3 动态字体大小结合视口单位和相对单位...© 菜鸟-创作你的创作这样无论屏幕大小变化，容器宽度都能自适应，且保持左右边距固定。...字体大小响应式调整结合视口单位和基础字号，提升阅读体验：h1 { font-size: calc(1rem + 2vw);}php37 Bytes© 菜鸟-创作你的创作5. flex布局中使用 calc.../ 3);}php98 Bytes© 菜鸟-创作你的创作只需修改变量即可全局调整间距。

    1.3K00

    CSS 尺寸单位概述

    一些低视力用户会增加浏览器的默认字体大小，以提高可读性。包括 px 在内的绝对值不会随着这种变化而缩放。因此，应使用字体相对单位。我们将在下一节讨论它们。...大于 1 的值是一个乘数。 而 rem 单位则是根据根元素的font-size值计算大小。 em 和 rem 大小都是相对于文档默认字体大小计算的长度。...如果值是一个百分比，那么line-height的计算值就是百分比值乘以计算出的字体大小（以像素为单位）。...选择正确的单位可以提高网站的可读性、可用性和可访问性。当你知道输出媒介的物理尺寸时，请使用绝对单位。字体相对单位和视口相对单位非常适合创建适应多种屏幕尺寸的布局。...容器相对单位非常适合创建可重复使用的组件，以适应各种布局。

    1.2K10

    使用Grid和Flex打造响应式布局：让你的网站“随遇而安”

    简单来说，响应式设计就是让网站能够根据设备的屏幕大小自动调整布局和样式。这就像是我们家里的沙发，可以根据客人的体型自动调整大小一样神奇。...固定宽度断点思维模式就像是只有一种尺码的衣服，它无法适应不同设备的屏幕大小。而响应式设计则像是多种尺码的衣服，可以根据设备的屏幕大小自动调整布局和样式。...; }}在这个例子中，当屏幕宽度小于600px时，.container将会变成单列布局，以适应小屏幕设备。...Flex伸缩（Flex Grow and Shrink）Flex伸缩功能允许开发者控制Flex项的伸缩比例，以适应不同的屏幕尺寸和布局需求。...clamp()函数：让字体大小“伸缩自如”clamp()函数是CSS4中引入的一项新特性，它可以让我们在最小值和最大值之间动态调整某个值。

    4K21

    rem与em详解

    因此，以 em 为单位的元素字体大小可能会受到其任何父元素的字体大小影响。 让我们看看一个例子。 在下面的 CodePen单步执行试试。...现在，我们的padding为 21px，即 1.5 x 14 = 21 已经变小了。 它不受父元素的字体大小。 由于存在着这些隐患，你可以看到为什么必须知道如何正确管理使用 em 单位。...这是很普遍的做法，所以改变html元素的字体大小时，可以使整个页面做相应调整 我强烈反对种做法，因为它重写继承了用户设置的浏览器字体大小。 更夸张的说，这剥削了用户自行调整以获得最佳视觉效果的能力。...我建议，当您使用 em 单位，他们使用的元素的字体大小应设置对rem单位，以保留的可扩展性，但避免继承混淆。...但是基于 rem 的断点他们将响应不同的字体大小。 不要使用 em 或 rem : 多列布局 布局中的列宽通常应该是 %，因此他们可以流畅适应无法预知大小的视区。

    5.3K30

    超越媒体查询：使用更新的特性进行响应式设计

    如前所述，我们没有将一个图像（通常是较大的高分辨率版本）发送到所有屏幕尺寸并将其缩放到视口宽度，而是指定了一组图像以在特定情况下使用。...帮助文本大小在不同的屏幕大小上正确缩放方面，该功能非常有用，例如从不让流畅的字体大小降低到清晰的字体大小以下： html { font-size: min(1rem, 22px); /* Stays...可以将其视为其他一些相对单位使用的基本单位或根单位。 将像素用于响应行为可能会遇到问题，因为它是固定的，但是如果你有完全不应调整大小的元素，那么像素就很棒。...因此，如果用户在浏览器上调整字体大小，则页面上的所有内容都将根据根大小正确缩放。 例如，当处理根集为16px时，我们指定的数字将乘以该数字乘以默认大小。...rem使用根（）元素的字体大小计算值，而声明em值的元素引用包含它的父元素的字体大小。

    5.3K10
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券