Я использую Materialize CSS с шрифтом Roboto 2.0. Шрифт выглядит ужасно в Chrome 43 и Firefox 37. Удивительно, но с IE он выглядит очень хорошо (полная реферация):
То же самое происходит с другими шрифтами, такими как Lato и Open Sans, а также на моем рабочем компьютере (такая же видеокарта и ОС, если это важно). Что-то не так в моей настройке (Windows 7 x64 + NVIDIA GTX 780 1920x1080)?
Нет, ничего плохого. Здесь есть несколько вещей, которые могут повлиять на то, как вещи оказываются.
Состояние веб-шрифтов и @font-face заключается в том, что браузеры имеют различную поддержку различных типов файлов, и эти типы файлов могут отображаться по-разному внутри браузера.
Обычно вы увидите следующие типы:
Браузеры обычно не поддерживают один из этих типов, они поддерживают несколько, и поэтому порядок, в котором они указаны в правиле @font-face, определяет, какой тип файла используется. Чтобы добавить к этому, эти файлы имеют разные размеры для одних и тех же шрифтов, поэтому их нужно учитывать.
Chrome, в частности отображает .woff плохо, кажется, и если вы напрямую связываетесь с fonts.googleapis.com css, чтобы использовать веб-шрифты, которые вы используете на усмотрение Google, насколько используется/загружен шрифт, и служба, похоже, предпочитает .woff/.woff2 по причинам размера файла.
Подробнее об этом можно прочитать в таких местах, как CSS-трюки, MDN и другие Блоги. Использование пользовательских веб-шрифтов по-прежнему не так просто, как должно быть, но такие услуги, как TypeKit, помогают в тяжелой работе.
Теперь все, что связано с разными типами файлов для шрифтов. По-прежнему существует множество свойств CSS, которые могут влиять на отображение определенного шрифта в браузере, как специфический поставщик, так и общее использование.
Наконец, мы не можем вывести операционную систему из уравнения, поскольку операционные системы имеют свои собственные механизмы рендеринга шрифтов. Здесь хорошая статья из TypeKit о некоторых из этих различий.
TL; DR. Нет, это вряд ли соответствует вашей графической карте (хотя это, очевидно, может сыграть в ней роль). Скорее всего, этот тип шрифта используется в браузере. Кажется, что выбор для .woff2 затем возвращается к .eot(IE) и .ttf будет производить лучшее качество, чем .woff или .svg.
Надеюсь, что это поможет!
Вы пробовали задавать сглаживание/рендеринг шрифтов?
Это вообще имеет большое значение в моем опыте.
body {
/* Better Font Rendering */
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Проблема с выпуском шрифта. Простое решение - использовать шрифт 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 */
}
Если кто-то споткнутся об этом, это проблема с версией Roboto в комплекте с Materialize. Решение опубликовано здесь fooobar.com/info/312741/...