亚像素像素值_你好亚像素世界

亚像素像素值

Since IE9 and Firefox(v.?) we now have subpixel rendering of fonts. This is cool and all but imagine this:

从IE9和Firefox(v。？)开始，我们现在有了fonts的亚像素渲染。 这很酷，但所有人都可以想象一下：

• you have some text
  你有一些文字
• you want to measure the width of the text and size another element to the same dimensions
  您想要测量文本的宽度并将另一个元素的大小调整为相同的尺寸

Simple.

简单。

But if you use offsetWidth/offsetHeight to measure, you get a rounded integer and not the exact dimensions.

但是，如果使用offsetWidth / offsetHeight进行测量，则会得到四舍五入的整数，而不是确切的尺寸。

See this example.

请参阅此示例。

In Firefox:

在Firefox中：

In IE:

在IE中：

So sizing something based on the offsetWidth will result in the familiar "css is awesome" picture.

因此，基于offsetWidth调整内容的大小将得到熟悉的“ css很棒”图片。

The solution is to use getComputedStyle() and then round up to make more space, like:

解决方案是使用getComputedStyle()然后四舍五入以腾出更多空间，例如：

var w = Math.ceil(parseFloat(getComputedStyle(text).width)) + 'px';

In other words:

换一种说法：

offsetWidth被认为是有害的 (offsetWidth considered harmful)

Side note: getComputedStyle() doesn't exist in old IEs, but these don't have subpixel rendering either. So something like:

附注：getComputedStyle()在旧的IE中不存在，但它们也不具有亚像素渲染。 所以像这样：

var w = window.getComputedStyle
  ? Math.ceil(parseFloat(getComputedStyle(text).width)) + 'px'
  : text.offsetWidth + 'px';

More typing, but hey - sexy fonts!

输入更多，但嘿-性感字体！

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/hello-subpixel-world/

亚像素像素值