1002246 - Different fallback-fonts being used depending on HWA being on or off

Status: RESOLVED DUPLICATE of bug 644385

(Core :: Layout: Text and Fonts, defect)

Description

[Elbart]

Attachment: testcase.html

Under some circumstances, Firefox is using different fallback-fonts depending on HWA being on or off, which can lead to unwanted side-effects.

Attached is a reduced testcase of a site I've encountered, where the layout was way off with HWA on because of this.

http://i.imgur.com/qO1EM3F.png

Top: Nightly HWA on
Bottom: Nightly HWA off, IE 11, Chrome 34
Win7 64bit SP1

Graphics
--------

Adapter Description: NVIDIA GeForce GT 640
Adapter Drivers: nvd3dumx,nvwgf2umx,nvwgf2umx nvd3dum,nvwgf2um,nvwgf2um
Adapter RAM: 2048
ClearType Parameters: Gamma: 2200 Pixel Structure: R ClearType Level: 100 Enhanced Contrast: 300
Device ID: 0x0fc1
Direct2D Enabled: true
DirectWrite Enabled: true (6.2.9200.16571)
Driver Date: 3-4-2014
Driver Version: 9.18.13.3523
GPU #2 Active: false
GPU Accelerated Windows: 1/1 Direct3D 10
Vendor ID: 0x10de
WebGL Renderer: Google Inc. -- ANGLE (NVIDIA GeForce GT 640 Direct3D9Ex vs_3_0 ps_3_0)
windowLayerManagerRemote: false
AzureCanvasBackend: direct2d
AzureContentBackend: direct2d
AzureFallbackCanvasBackend: cairo
AzureSkiaAccelerated: 0

Important Modified Preferences
------------------------------

gfx.direct3d.last_used_feature_level_idx: 0

Comment 1

[Jonathan Kew [:jfkthame]]

Under the GDI font model, each font family can only have 4 "standard" faces (upright and italic, in regular and bold weights). Therefore, GDI considers "Arial Black" to be a separate family unrelated to "Arial". And so the heaviest weight in the "Arial" family is "Arial Bold", and that's what you get.

Under DirectWrite, however, the "Arial Black" face is part of the "Arial" font family, so when you request font-weight:800, that's what you get. (It's bolder than "Arial Bold", which has font-weight:700).

You're essentially dealing with two distinct platforms here, and they have different font configurations. So it's not surprising that in some cases you get different results, depending on exactly what fonts are available and how the platform classifies them.

If you want Arial Black to be used on both, you need to try something like

  font-family: "Arial Black", Arial, sans-serif;
  font-weight: 800;

while if you want Arial Bold to be used on both, then use font-weight:700 (or font-weight:bold) rather than 800.

In any case, a site that depends on the exact fonts that are chosen, and their specific metrics, is likely to break when viewed on other platforms such as OS X, Linux, Android, ....... Robust web design needs to be flexible enough to accommodate the fact that different platforms have different fonts with differing metrics.

Comment 2

[Elbart]

(In reply to Jonathan Kew (:jfkthame) from comment #1)

> You're essentially dealing with two distinct platforms here, and they have
> different font configurations. So it's not surprising that in some cases you
> get different results, depending on exactly what fonts are available and how
> the platform classifies them.

Isn't IE11 using DW for font-rendering too? Why is it not affected?

And Chrome will get DW in version 35( http://www.chromestatus.com/features/4725550652325888 ), and when it's enabled in chrome://flags, it also doesn't have the same font-issue as Firefox (although it has some spacing issues).

> If you want Arial Black to be used on both, you need to try something like
> 
>   font-family: "Arial Black", Arial, sans-serif;
>   font-weight: 800;

It's not my site, I was just visiting it.
And on the site the font-rule is defined as

> font: 1.2em/20px "helvetica neue",Helvetica,Arial,Verdana,sans-serif;