HTML 使字体以与页面相同的方式缩放

Question

我想用 HTML 创建一个 A4 样式的页面。但是我希望它在每次缩放时看起来都一样进进出出。例如，请查看以下屏幕截图:

当我缩小时，页面内的段落看起来更长。我要的是Word Style放大和缩小。

这里是这个页面的编码方式:

<div class="document">
<div    class="page">
    <div class="content">
        <h1>Hello World</h1>

        <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>
    </div>
</div>

CSS 代码:

body {
    margin: 0;
    padding: 0;
    background-color: grey;
}


.page{
    margin:auto;
    margin-top:50px;
    width:210mm;
    height:297mm;
    background-color:white;
    border:1px solid black;
    padding:0px;
}

.content{
    background-color:   orange;
    margin:10%;
}

Answer 1

Webkit 浏览器(如 Chrome 或 Opera)尝试在低缩放(如 25%)下调整文本大小以使其可读。如果您查看计算的 css，您会注意到字体大小正在改变，即使您在 css 中定义它也是如此。您需要一个插件来禁用此调整大小。

100% 放大 chrome

25% 放大 chrome

Internet Explorer 不会在低缩放时调整字体大小