如何在CSS浏览器中浮动CSS字体大小值？

CSS em是一个很好的工具，但有些事情总是让我很烦恼，可能是因为我完全不理解它们。如何在CSS浏览器中浮动CSS字体大小值？

字体不能在每个尺寸上均匀渲染，特别是在不精确的值下很糟糕。这就是为什么，如果你想使用em精确的像素值的字体给，你必须做这样的事情（假设你没有改变身体的16px的字体大小）：

font-size: 0.875em; /* 14px */ 
font-size: 1.25em; /* 18px */

也许你只是想稍微增加一些尺寸，但后来意识到，0.9em = 14.4px，然后你害怕你的字体可能看起来模糊！在任何情况下，如果您给012栏的font-size的1.25em（18px），然后将主体大小从16px更改为14px，则该段将为17.5px。再次模糊！

假设我们正在处理像桌面一样的常见1x配给屏幕，例如，如何将字体渲染为11.5px？我已将它们打印在测试html文件上，它们看起来完全像12px字体。 但这是所有浏览器推荐的行为吗？那么在使用ems时，可以通过字体大小来确定填充和边距等大小？他们是否也被四舍五入？

编辑：我做了3个市长浏览器的效果图之间的比较。那就是：

我缩放它（200％）一点点，所以它更容易看到的细节。在顶部，您可以看到相同的文本如何在14px（左）和14.4px（右）呈现。下面，我使用Difference blendmode将它们覆盖在photoshop上，以查看是否存在任何差异。正如你所看到的，Chrome浏览器会调整字体大小，并以相同的大小呈现它，同时，框的高度也不相同。 Firefox具有相同的高度，但字体在x轴上呈现稍微不同，而字体的高度似乎相同。 IE的结果是一种混合。无论如何，我真的很惊讶，因为14.4px字体看起来并没有模糊。

来源

2016-03-14 Vandervals

但这是所有浏览器推荐的行为吗？

这是我上w3.org

发现参考像素是一个像素与96DPI的像素密度，并从一个臂的长度的读取器的距离的设备上的视觉角度。对于28英寸的标称臂长，因此视角约为0.0213度。对于手臂长度来说，1px因此相当于约0.26毫米（1/96英寸）。

所以1px不一定对应屏幕上的1个像素，见下文图像：

因此，即使你可以计算基于0.25px（使用上述像素值），由1文字移动元件屏幕像素，它没有完成。

在使用ems时，字体大小可能会决定填充和边距等大小？他们是否也被四舍五入？

退房this question，它可能是有用的。基本上价值四舍五入。你的11.5px看起来与12px相同的原因是因为它被取整了。 11.4px看起来就像11px

也看看this website，它提供了一些有趣的行为，如何工作。

查看下面的示例代码片段。了解如何在div只得到一个像素上translateY(0.5px)向下移动，这证明了浏览器舍入值：

.box { 
 
    width: 30px; 
 
    height: 30px; 
 
    background-color: #FF0000; 
 
    display: inline-block; 
 
} 
 
#cont { 
 
    outline: 1px solid #000; 
 
    display: inline-block; 
 
}

<div id="cont"> 
 
    <div class="box" style="transform: translateY(0.1px)"></div> 
 
    <div class="box" style="transform: translateY(0.2px)"></div> 
 
    <div class="box" style="transform: translateY(0.3px)"></div> 
 
    <div class="box" style="transform: translateY(0.4px)"></div> 
 
    <div class="box" style="transform: translateY(0.5px)"></div> 
 
    <div class="box" style="transform: translateY(0.6px)"></div> 
 
    <div class="box" style="transform: translateY(0.7px)"></div> 
 
    <div class="box" style="transform: translateY(0.8px)"></div> 
 
    <div class="box" style="transform: translateY(0.9px)"></div> 
 
    <div class="box" style="transform: translateY(1.0px)"></div> 
 
</div>

来源

2016-03-14 11:12:52 Druzion

在我来说，我没有看到0.5px跳，我看到水平一行像素的衰落越来越多，直到他们消失 – Vandervals

是什么浏览器，你使用。我在Firefox 45和47上测试了这个？ – Druzion

其实你是对的Firefox，但它看起来不像铬... – Vandervals

这不是一个简单的问题，并不适用“精确”到浏览器。这更多的是关于整个渲染系统和“连续空间与离散空间”或“使用方框绘制曲线”有关的问题。

一些文章可以帮助到有关于这个问题更好的理解：

（尝试从谷歌searchs结果“字体呈现离散的空间”，“子像素字体渲染”，或“字体提示”）

http://jcgt.org/published/0002/01/04/paper.pdf http://www.cutebugs.net/files/curve/fabris97antialiasing.pdf http://lspwww.epfl.ch/publications/typography/frsa.pdf https://www.grc.com/ctwho.htm

一个“正确”的行为很难在此定义，所以“默认行为”变得几乎不可能。这是一个关于空间和人类感知的数学问题，而不仅仅是浏览器行为或CSS。

......无论如何，关于“移动1像素”的描述行为与浏览器或系统使用的字体提示技术有关。

来源

2016-03-19 11:01:13

这是很多有用的信息，你看看，但最终，它不是一个明确的答案，它只是“这取决于”。我知道这很难，但你能否提出一个安全使用摩斯病例的通用规则？你认为使用亚像素字体大小还是安全的？ – Vandervals

我知道这不是一个答案，但这个问题没有真正的答案。字体的渲染（位置和大小）不仅取决于浏览器，还取决于O.S.，图形系统配置，像素密度和媒体......我信任的唯一经验法则是：0。875 rem或更小对易读性是危险的，使用小数（CSS）像素的尺寸或定位仅适用于打印介质（高分辨率或“像素比率”：1css像素=多个像素）。媒体像素只是一个像素，不能分割。 –

我已经更新了一些更多信息的解释。 – Vandervals

这是不是你需要的分层方式

.box{ 
     font-size: 1em; /* size according to your*/ 

    }

定义CSS一个真正凝灰岩问题，这是你的DIV值假设你有你的盒子内容的另一个标题标签。

.box h2{font-size:14px; }

只是简单的

more info

来源

2016-03-23 08:55:15 rao0088

如何在CSS浏览器中浮动CSS字体大小值？

回答

相关问题