Databases
StackOverflow2013
Postsdbo
POIs there any way to force Chrome to render fractional pixel font sizes accurately?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs there any way to force Chrome to render fractional pixel font sizes accurately?
    primarykey
    data
    text
    <p>I am having issues with accurate font rendering in Chrome and wondering if anyone here can provide some advice. I need to precisely fill an allotted width with text, which I'm accomplishing via some simple JavaScript.</p> <p>The JS works well, and correctly applies a fractional font-size value to each of my width-filling spans, and it looks great in Firefox/IE. But, the appearance is very spotty in Chrome because it rounds font sizes to the nearest integer pixel value.</p> <p>An excellent illustration of the problem can be found <a href="https://code.google.com/p/chromium/issues/detail?id=254056" rel="nofollow noreferrer">in this recently filed Chromium issue.</a> Looking at this simple markup sample, you can clearly see Chrome's font-size rounding:</p> <pre><code>&lt;html&gt; &lt;body&gt; &lt;div style='font-size: 10px'&gt;Text Text Text Text&lt;/div&gt; &lt;div style='font-size: 10.4px'&gt;Text Text Text Text&lt;/div&gt; &lt;div style='font-size: 10.5px'&gt;Text Text Text Text&lt;/div&gt; &lt;div style='font-size: 11px'&gt;Text Text Text Text&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Chrome rendering:</p> <p><img src="https://i.stack.imgur.com/xEzIm.png" alt="Chrome font size"></p> <p>Firefox rendering:</p> <p><img src="https://i.stack.imgur.com/OPO2Y.png" alt="Firefox font size"></p> <p>IE9 rendering:</p> <p><img src="https://i.stack.imgur.com/Vpgrb.png" alt="IE9 font size"></p> <p>Obviously it's a bad sign that the best reference I could find for what I need to do is in the Chromium issue tracker...but I thought it couldn't hurt to ask. Can anyone suggest a workaround? CSS or JS solutions are both fine - anything to get those fonts more accurate!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USuptownnickbrown
    1. USuptownnickbrown
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COChrome (on Windows) really *really* sucks at rendering text. All I know is that they are working on it... :( Would be great if somebody could tell me otherwise though.
      singulars
      1. POIs there any way to force Chrome to render fractional pixel font sizes accurately?
      1. USPeeHaa
    2. COI suppose it's worth mentioning that I see this behavior in Chrome on both Windows and Mac.
      singulars
      1. POIs there any way to force Chrome to render fractional pixel font sizes accurately?
      1. USuptownnickbrown
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload