搜尋 Mozilla 技術支援網站

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

Learn More

FF keeps rendering text in BOLD instead of the font-weight set in CSS. Anyone else having this issue?

  • 11 回覆
  • 1 有這個問題
  • 11 次檢視
  • 最近回覆由 jscher2000

more options

I'm having this issue in Firefox where it's rendering all of the Google fonts on two websites I've created as BOLD instead of THIN or REGULAR or whatever else they're set to in the CSS. I've found many instances online of users reporting this and similar issues over the past few years and have tried a number of solutions. Adding the following code as "extra CSS" to the Wordpress theme is the only thing that fixes it:

html { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; }

Yet adding this code has caused other rendering issues on the site. Both sites I'm having this issue on look fine in Chrome and Safari btw. I've troubleshooted by clearing my caches, disabling the few plugins I have installed and switched to different WP themes by different developers but the problem persists. I tried changing FF settings too... disabling plugins and add-ons, switched themes and turned off hardware acceleration to no avail. It should be noted I don't notice this on random sites I visit, just these that I've created using Wordpress. Checking another site I created by hand coding the Google fonts render fine.

Attached are two examples of the issue. First is the correct rendering, second is the incorrect BOLD rendering of the same text. Any thoughts anyone?

附加的畫面擷圖

由 o-o--LOKI--o-o 於 修改

所有回覆 (11)

more options

Can you provide a link to the website?

more options

o-o--LOKI--o-o said

It should be noted I don't notice this on random sites I visit, just these that I've created using Wordpress. Checking another site I created by hand coding the Google fonts render fine.

Can you give a link to a page demonstrating the problem? It would be interesting to see whether there is any unusual CSS that isn't used on, say, the Google Fonts example page for the same font (where presumably it looks normal to you).

more options

You can use the Inspector to check what CSS rules are applied and what font is used in case a bold(er) font is being used. The Computed tab shows what rule(s) are present and active.

You can right-click and select "Inspect Element" to open the builtin Inspector with this element selected.

You can check the font used for selected text in the Font tab in the right pane of the Inspector.

more options

Thanks for the replies guys. Here's a link to my own website where I've disabled the extra CSS-fix so that the entire site renders bold.

http://neptunemedia.net/

I'm going to dive into the Inspector this morning and spend some time trying to figure out what CSS rules are being applied and why my font-weight specifications are being overwritten.

I'm very familiar with the Inspector and use it frequently. Feel free to check it out yourselves if you have time... perhaps one of you can see something I'm not seeing.

Thanks!

more options

[WORKING NOW, NEVER MIND THIS POST]

由 jscher2000 於 修改

more options

FYI, if anyone checks out my website and it looks completely messed up, I'm deactivating almost all plugins to see if any of them are the cause of the problem.

more options

jscher2000.... LOL... figures someone would be on this immediately, right when I'm messing around with plugins. As soon as I determine none are the problem, I'll post another message saying the site is fully back up and running.

more options

I've determined it's not a plugin issue. The site is back up and fully running.

more options

The Lato (or Lato Light) font used on your site looks different from the example you posted originally.

Anyway, considering that the rules at issue are for MacOS only, I might not be able to help (as a Windows user).

more options

Yeah I posted sample text from another site of mine. Thanks anyway.

more options

Can you do a comparison between how Lato or Lato Light looks for you on your site vs. how it looks on Google's page?

https://fonts.google.com/specimen/Lato