以缩小的字体大小显示容器

Posted 2023-03-06

【中文标题】以缩小的字体大小显示容器

【英文标题】：Display container with scaled-down font-size

【发布时间】：2016-11-11 06:30:50

【问题描述】：

想象一个有一个容器，在它下面会有很多其他的元素。 这些元素中的每一个都可能明确设置了它们的字体大小（例如，p 可能是 16px、blockquote、20px 等）。

我想显示这个容器，字体大小按一定比例缩小，同时保留容器内元素之间的相对大小差异（例如，p 的字体大小必须始终为 @987654324 的 4/5 @的字体大小）。

我可以用 html/CSS 做到这一点吗？

编辑上下文：

我正在使用某种主题，并且我希望避免在ems（我很清楚）中重新定义所有元素，也不要全部重新定义它们。

我真正想知道的是，是否有类似：.myDiv font-size-scale: 0.5; 我可以申请并完成它。

【问题讨论】：

使用ems 或rems

【参考方案1】：

您可以使用 SASS 执行此操作，并使用一些数学来确定字体大小应该是多少。

一个简单的例子如下

$blocksize: 20px;

blockquote 
  font-size:$blocksize;

您将 blockqoute 字体大小设置为变量。然后将该变量应用为块引用的字体大小。

接下来为你的'p'元素执行blocksize变量的操作。

p 
  font-size:$blocksize * 0.2;

现在 p 元素将全部是块引用大小的 80% 或 4/5。

【参考方案2】：

px 是绝对大小控制，em 是相对大小控制。使用 em 应该可以让你按照你想要的方式缩放和调整大小。虽然这可能很痛苦，但如果您有 16px、20px 之类的默认值，并且只希望特定容器具有不同的大小值，则可能需要使用内联样式属性。

例如：

<p style="font-size: 1em">Text here.</p>

【参考方案3】：

“ems”是你的朋友

如果将容器的字体大小设置为10px，则可以将其子元素的字体大小指定为ems，1em相当于父元素的字体大小，所以在这种情况下：

p 
    font-size: 1.6em;

相当于 16 像素。在元素内设置剩余的字体大小，然后放大和缩小它们，只需更改容器的字体大小。您的子元素字体将随着字体大小的变化而缩放。

【参考方案4】：

您可以使用em 执行此操作。

HTML,

<div>
  <p>Some Text</p>
  <blockquote>Some Block</blockquote>
</div>

<div class="small">
  <p>Some Text</p>
  <blockquote>Some Block</blockquote>
</div>

CSS，

p  font-size: 2em; 
blockquote  font-size: 4em; 

div  font-size: 16px; 
div.small  font-size: 9px; 

查看示例：https://jsfiddle.net/toz75hp2/3/

---

如果你想避免em，那么你可以简单地使用% percentage 值。

见这个例子：https://jsfiddle.net/toz75hp2/4/

CSS，

p  font-size: 200%; 
blockquote  font-size: 350%; 

div  font-size: 16px; 
div.small  font-size: 9px; 

跨浏览器警告！它不适用于所有浏览器。有些会产生意想不到的结果。

---

或者你只是指缩放你可以简单地使用css zoom。但这会缩放所有内容（没有 zoom-text 属性）。所以如果容器内只有文本就可以使用。

看例子：https://jsfiddle.net/toz75hp2/5/

.zoom 
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
    -o-transform: scale(2);
    -o-transform-origin: 0 0;
    -webkit-transform: scale(2);
    -webkit-transform-origin: 0 0;

【讨论】：

在看到 OP 的“编辑上下文”之后，这是最好的选择。修改 CSS 文件可以一次完成所有工作，让生活变得轻松。

我特别反对em，我真正想要避免的是手动更改在px 中定义的所有项目的定义。将% 换成em 并不能从根本上解决这个问题:)

对不起，你的问题没有任何意义。因为 css font-size = font-size-scale。如果我错了，请纠正我。 :)

嗯...我明白了。试试-moz-transform: scale()

简洁，.zoom 的新定义似乎运行良好（scale 本身保留了块的中心，在这种情况下这是不可取的）。