javascript - CSS/JS : Is it possible to scale text accurately?(不仅仅是改变字体大小)

标签 javascript css responsive-design

我知道如何使用 CSS 更改字体大小,我知道如何在 Canvas 内缩放文本,但是是否可以使用 CSS/JS 缩放 Canvas 外的文本?

我现在的问题是我希望页面上的动态对象随页面一起调整大小,但是当这些对象上有文本时,它无法正确调整大小,因为字体的大小只有完整的像素数量而不是分数用户调整大小时出现“抖动”或“跳跃”。在字体上使用百分比数量不会改变这样一个事实,即没有“16.5”大小的字体,30 个字符的文本每次增量至少跳转 30 像素。

这也会导致自动换行的问题,在调整大小之间给出不一致的结果,每行一个单词可能会根据大小决定随机跳到下一行:字体关系和整个段落的滚雪球。

基本上我想在每个 x,y 窗口大小上获得相同的视觉效果,而不必将所有文本存储为图像,也不需要为我使用的每个文本创建 Canvas ,这听起来有点荒谬。这可能吗?

最佳答案

我相信将排版控制到这种程度的最佳选择是使用 vhvwvmin & vmax CSS 属性:这些属性允许您分别根据视口(viewport)高度、宽度以及两者中较小和较大的值来缩放文本。

我个人发现这些在中到大尺寸分辨率下效果很好,但在较窄的视口(viewport)尺寸下开始崩溃,放弃这种控制级别可能更明智。参见 Viewport Sized Typography在 CSS-Tricks 上了解用法和更多信息。

关于javascript - CSS/JS : Is it possible to scale text accurately?(不仅仅是改变字体大小),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37652390/

相关文章:

javascript - 如何使 Angular 仅影响同一行的模型和范围

javascript - 在 javascript 或 css 中定位前一个 div

css - 我可以在 react-responsive-carousel 中自定义 Carousel-indicators 吗

javascript - onclick 函数关闭 'help window' 不工作

javascript - Controller 不会在没有重播的情况下返回结果。使用 fastify 平台发送

javascript - 使用 Javascript 制作电影或幻灯片

css - 如何使 anchor 链接居中?

html - p 标签在满之前换行

html - 如何使两个图像具有固定高度和纯 CSS 响应?

html - 响应式 DIV 填满整个屏幕