当与用于 WCAG（可访问性）propeses 的 vw 单元一起使用时，如何放大 wesite 字体大小？

Question

我正在为我的网站编写一些 css 样式表并大量使用 "vw" 和 "vh" css 单元。我注意到当我尝试使用浏览器放大镜放大（调整大小？）字体大小时或使用 Ctrl+用鼠标向上滚动时，字体大小不会增加并保持不变。我必须使该网站易于访问（AA 级），其中一项主要要求是

Ensure Your Site Responds Well to Increased Text-Size (1.4)

从 here 获得。

使用"rem"或"em"调整大小，但是当我调整window大小时它们没有"stretched"的效果，这是使用时最大的冒险"vw" 个单位。

我该如何解决这个问题？我怎样才能获得这两样东西？调整文本大小并保持屏幕文本的纵横比？

谢谢。

Answer 1

如果您想与 WCAG 兼容，

vh 和 vw 单位不适用于 font-size。

如果您想获得预期的行为，唯一可能的解决方案是使用 javascript。

编辑：示例解决方案 jQuery:

$(document).ready(function() {
  $(".vh").each(function() {
    $(this).css("font-size", $(this).css("font-size"));
  });
});

.vh {
   font-size: 50vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="vh">Test</div>

Answer 2

根据用户字体大小偏好设置视口单位缩放非常简单。只需使用 calc() 将视口单位与相对单位结合起来。例如：

.example { 
  font-size: calc(1rem + 1.5vw); 
}

这还有一个额外的好处，就是可以将最小字体大小设置为 1rem (16px)，这通常不仅对可访问性有用。

还有其他方法可以控制缩放比例，但这超出了这个问题的范围。只是 google 'Fluid Typography' 你应该找到我正在谈论的技巧。

How can i enlarge wesite font-size when used with vw unit for WCAG (accessibility) propeses?