CSS "font: menu" increases font-size proportionally with DPI on Windows
Reported by
jason.gi...@tigerlogic.com,
May 26 2016
|
||
Issue descriptionChrome Version : 51.0.2704.63 Windows URLs (if applicable) : http://codepen.io/anon/pen/rLBdgM Other browsers tested: Add OK or FAIL, along with the version, after other browsers where you have tested this issue: Chrome (Mac): OK (v 50.0.2661.102) Firefox: OK (v 46.0.1) Edge: FAIL (v 25.10586.0.0) What steps will reproduce the problem? (1) Add a CSS rule to apply "font: menu;" to an element containing text (e.g: http://codepen.io/anon/pen/rLBdgM) (2) Change Windows' "Size of text, apps and other items" to 200%, under 'Display Settings'. (3) Log out, and back in, then view the web page. What is the expected result? The 'menu' text should be smaller than standard text, as it as when Windows is set to 100% scale. What happens instead? The menu text is far too big. It has been scaled with the DPI (from 12px at 100% to 24px at 200%). These are 'css' pixels, so are already scaled with relation to physical pixels by the window.devicePixelRatio. Please provide any additional information below. Attach a screenshot if possible.
,
May 27 2016
This is intentional and working as intended. "font: menu" uses the system font for menu items and when the system font size is increased so is the menu font size.
,
Jun 8 2016
I'm unsure that this really is the way it should behave. Fair enough that the font size should be set from the system font, but should this not be divided by the devicePixelRatio? As a CSS pixel at a higher dpi is already more physical pixels. Or use a pt size? Attached is a screenshot showing a system menu, Chrome's menu and my HTML menu, using "font: menu", with the system set to 300% scale. As you can see, my menu's font is much larger than the others. |
||
►
Sign in to add a comment |
||
Comment 1 by ajha@chromium.org
, May 27 2016Components: Blink>Fonts UI>HighDPI
Labels: -Pri-3 M-53 OS-Linux OS-Windows Pri-2
Status: Untriaged (was: Unconfirmed)