搜尋 Mozilla 技術支援網站

防止技術支援詐騙。我們絕對不會要求您撥打電話或發送簡訊,或是提供個人資訊。請用「回報濫用」功能回報可疑的行為。

Learn More

How to get rid of blurry and thus bolder web fonts and to preserve special font glyphs/icons

  • 1 回覆
  • 1 有這個問題
  • 14 次檢視
  • 最近回覆由 Worad

more options

Problem: Disabling webfonts completely doesn't work, because many websites use font icons. Usually, icons are a critical part of web-site functionality, so without web-fonts sites like Github become unusable.

Please compare the attached screenshots to see the unwanted font rendering in comparison to the desired one.

Note: For some reasons, the attached screenshots are not showed in their original sizes, and thus the described and discussed effects are not seen. To avoid this site/FF behavior, please open these screenshots in a separate tab/window (via the context menu because the site's engine catches and ignores Ctrl+Left Mouse Button), and then scale up to the original size if needed.

The following options are in effect for all the screenshots:

  • Display: LCD, 24", 1920x1200x32, 96 dpi (HP Compaq LA2405wg)
  • GPU: Saphire ATI Radeon X1950GT
  • Font preferences: ClearType and anti-aliasing are disabled in the system settings
  • Allow pages to choose their own fonts, instead of my selections above: checked, see Options -> Content -> Advanced.

The screenshots with unwanted, blurred, smoothed, anti-aliased and thus bolded fonts:

These screenshots were obtained at the following customized preferences:

  • gfx.font_rendering.cleartype_params.rendering_mode: 1 (aliased)
  • gfx.downloadable_fonts.woff2.enabled: false
  • gfx.font_rendering.opentype_svg.enabled: false

The best and desired result was obtained from Reddit at the same preferences (8), full zoom 115%:

  • There are no unprintable glyphs, icons and characters.
  • Strokes are one-pixel wide, no smoothing, no anti-aliasing, and thus no blurred or bolded text.
  • Each glyph is rendered with pixel precision and is exactly fitted the pixel grid.

The screenshots with the desired thin and legible fonts without anti-aliasing and distortions but with unprintable glyphs/icons somewhere:

These screenshots were obtained at the same customized preferences and:

  • gfx.downloadable_fonts.enabled: false

But at this option, glyphs/icons like arrows and others are not rendered (see rectangles/arrows in red/blue pointing to). The good and desired side effect is that pages are loaded and rendered faster, typing is also much faster, and UI is much more responsive.

If gfx.font_rendering.cleartype.use_for_downloadable_fonts set false, text becomes partially distorted as in screenshot (9), see red underlining.

How to get rid of smoothed/anti-aliased fonts and blurred and thus bolded text, to get thin/one-pixel-wide fonts without anti-aliasing and any distortions and to preserve special glyphs/icons at the same time as e.g. in screenshot (8)?

'''Problem: ''' Disabling webfonts completely doesn't work, because many websites use font icons. Usually, icons are a critical part of web-site functionality, so without web-fonts sites like Github become unusable. Please compare the attached screenshots to see the unwanted font rendering in comparison to the desired one. '''Note: ''' For some reasons, the attached screenshots are not showed in their original sizes, and thus the described and discussed effects are not seen. To avoid this site/FF behavior, please open these screenshots in a separate tab/window (via the context menu because the site's engine catches and ignores Ctrl+Left Mouse Button), and then scale up to the original size if needed. The following options are in effect for all the screenshots: * Display: LCD, 24", 1920x1200x32, 96 dpi (HP Compaq LA2405wg) * GPU: Saphire ATI Radeon X1950GT * Font preferences: ClearType and anti-aliasing are disabled in the system settings * Allow pages to choose their own fonts, instead of my selections above: checked, [https://support.mozilla.org/en-US/kb/settings-for-web-content-pop-ups-fonts-languages see Options -> Content -> Advanced]. The screenshots with unwanted, blurred, smoothed, anti-aliased and thus bolded fonts: * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-54-43-ece288.png (6)] from support.mozilla.org: anti-aliased font, full zoom 120% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-41-12-66b6ac.png (1)] from bugzilla.mozilla.org: anti-aliased font, full zoom 120% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-52-59-ab404b.png (3)] Ghostery add-on: "anti-aliased" font These screenshots were obtained at the following customized preferences: * gfx.font_rendering.cleartype_params.rendering_mode: 1 (aliased) * gfx.downloadable_fonts.woff2.enabled: false * gfx.font_rendering.opentype_svg.enabled: false The best and desired result was obtained from Reddit at the same preferences [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-17-04-09-5a0d57.png (8)], full zoom 115%: * There are no unprintable glyphs, icons and characters. * Strokes are one-pixel wide, no smoothing, no anti-aliasing, and thus no blurred or bolded text. * Each glyph is rendered with pixel precision and is exactly fitted the pixel grid. The screenshots with the desired thin and legible fonts without anti-aliasing and distortions but with unprintable glyphs/icons somewhere: * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-55-02-84df83.png (7)] from support.mozilla.org, full zoom 120% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-41-33-e6d57d.png (2)] from developer.mozilla.org: There are unprintable icons, full zoom 120% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-54-20-4c88cb.png (5)] from Reddit: There are unprintable glyphs/icons, full zoom 115% * [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-16-53-23-08110e.png (4)] Ghostery add-on: normal, legible font These screenshots were obtained at the same customized preferences and: * gfx.downloadable_fonts.enabled: false But at this option, glyphs/icons like arrows and others are not rendered (see rectangles/arrows in red/blue pointing to). The good and desired side effect is that pages are loaded and rendered faster, typing is also much faster, and UI is much more responsive. If <code>gfx.font_rendering.cleartype.use_for_downloadable_fonts</code> set <code>false</code>, text becomes partially distorted as in screenshot [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-18-32-08-6808e3.png (9), see red underlining]. How to get rid of smoothed/anti-aliased fonts and blurred and thus bolded text, to get thin/one-pixel-wide fonts without anti-aliasing and any distortions and to preserve special glyphs/icons at the same time as e.g. in screenshot [https://support.cdn.mozilla.net/media/uploads/images/2016-06-16-17-04-09-5a0d57.png (8)]?
附加的畫面擷圖

由 Worad 於 修改

所有回覆 (1)

more options

deleted

由 Worad 於 修改