Join the AMA (Ask Me Anything) with the Firefox leadership team to celebrate Firefox 20th anniversary and discuss Firefox’s future on Mozilla Connect. Mark your calendar on Thursday, November 14, 18:00 - 20:00 UTC!

Tìm kiếm hỗ trợ

Tránh các lừa đảo về hỗ trợ. Chúng tôi sẽ không bao giờ yêu cầu bạn gọi hoặc nhắn tin đến số điện thoại hoặc chia sẻ thông tin cá nhân. Vui lòng báo cáo hoạt động đáng ngờ bằng cách sử dụng tùy chọn "Báo cáo lạm dụng".

Tìm hiểu thêm

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

  • 1 trả lời
  • 1 gặp vấn đề này
  • 11 lượt xem
  • Trả lời mới nhất được viết bởi 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)]?
Đính kèm ảnh chụp màn hình

Được chỉnh sửa bởi Worad vào

Tất cả các câu trả lời (1)

more options

deleted

Được chỉnh sửa bởi Worad vào