搜尋 Mozilla 技術支援網站

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

Learn More

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

  • 1 回覆
  • 1 有這個問題
  • 6 次檢視
  • 最近回覆由 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)?

附加的畫面擷圖

由 Worad 於 修改

所有回覆 (1)

more options

deleted

由 Worad 於 修改