Коригиране на кривата на изобразяване на шрифтове във Firefox – Блог за разработчици

Огнена лисица - firefox не е торта от дълго време... но днес забелязах, че шрифтътPoppins отGoogle Fonts в оформлението на проекта ми се показва криво и различно на Mac и Windows системи. Така че трябваше да го поправя...

Естествено, всеки браузър има свои собствени странности и една от странностите наFirefox е да показва обикновените шрифтове с удебелен/удебелен шрифт. Честно казано, не се „парих“ много по този въпрос преди, защото имаше малки разлики, но те не бяха критични. Например, по-долу е даден пример за изобразяване на шрифтVK от браузъриFirefox и Chrome (отляво надясно):

коригиране

Видимо удебеляване? Предполагам, да. Дразни? Да, дори много. Тъй като не можете да го поправите във VK, ще трябва да се върнете и да поправите 😆

Ако погледнем по-задълбочено в проблема, тогава такъв бъг възниква при удебелени Google Fonts (полуудебелени)във Firefox на Mac и вWindows при средни шрифтове (средни). Също така се появяват проблеми, ако използвате Typekit в оформлението. Във всеки случай отделих известно време, за да измисля кратък списък отшрифтове, коитоне се изобразяват правилно във Firefox :

  • Droid Sans
  • Гил Санс
  • Монсерат
  • Попинз
  • Проксима Нова

Решаване на проблема с показването на удебелени шрифтове във Firefox

Всъщност проблемът се решава в няколко css реда: