Roboto от materializecss weird отрисовки шрифтов в Chrome, Firefox, OK с IE?

Ответ 1

Нет, ничего плохого. Здесь есть несколько вещей, которые могут повлиять на то, как вещи оказываются.

Состояние веб-шрифтов и @font-face заключается в том, что браузеры имеют различную поддержку различных типов файлов, и эти типы файлов могут отображаться по-разному внутри браузера.

Обычно вы увидите следующие типы:

• .eot
• .woff
• .woff2
• .svg
• .ttf

Браузеры обычно не поддерживают один из этих типов, они поддерживают несколько, и поэтому порядок, в котором они указаны в правиле @font-face, определяет, какой тип файла используется. Чтобы добавить к этому, эти файлы имеют разные размеры для одних и тех же шрифтов, поэтому их нужно учитывать.

Chrome, в частности отображает .woff плохо, кажется, и если вы напрямую связываетесь с fonts.googleapis.com css, чтобы использовать веб-шрифты, которые вы используете на усмотрение Google, насколько используется/загружен шрифт, и служба, похоже, предпочитает .woff/.woff2 по причинам размера файла.

Подробнее об этом можно прочитать в таких местах, как CSS-трюки, MDN и другие Блоги. Использование пользовательских веб-шрифтов по-прежнему не так просто, как должно быть, но такие услуги, как TypeKit, помогают в тяжелой работе.

Теперь все, что связано с разными типами файлов для шрифтов. По-прежнему существует множество свойств CSS, которые могут влиять на отображение определенного шрифта в браузере, как специфический поставщик, так и общее использование.

Наконец, мы не можем вывести операционную систему из уравнения, поскольку операционные системы имеют свои собственные механизмы рендеринга шрифтов. Здесь хорошая статья из TypeKit о некоторых из этих различий.

TL; DR. Нет, это вряд ли соответствует вашей графической карте (хотя это, очевидно, может сыграть в ней роль). Скорее всего, этот тип шрифта используется в браузере. Кажется, что выбор для .woff2 затем возвращается к .eot(IE) и .ttf будет производить лучшее качество, чем .woff или .svg.

Надеюсь, что это поможет!

Ответ 2

Вы пробовали задавать сглаживание/рендеринг шрифтов?
Это вообще имеет большое значение в моем опыте.

body {
  /* Better Font Rendering */
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Ответ 3

Проблема с выпуском шрифта. Простое решение - использовать шрифт google, например:

<link href='http://fonts.googleapis.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'> 

Или сложное решение, но часто самое лучшее, - использовать @font-face для каждого типа файлов для каждого браузера.

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Ответ 4

Если кто-то споткнутся об этом, это проблема с версией Roboto в комплекте с Materialize. Решение опубликовано здесь fooobar.com/info/312741/...