Intereting Posts
IE6 + IE7 проблема CSS с переполнением: скрытый; – позиция: относительная; комбо Как нарисовать три треугольника на одной странице с помощью canvasа? Могу ли я resize шрифта в зависимости от количества букв? Первое выпадающее меню для автоматического изменения параметров второго выпадающего меню Alt? Longdesc? Заглавие? Что происходит, особенно для сайтов с тяжелыми изображениями? Что быстрее для включения сценариев, используя CDN (Google) или сохраняя их локально в корне сайта? Нежелательное расстояние CSS между элементами привязки-тега Передать переменные между различными файлами .js Как предотвратить двойное нажатие кнопки ng-click на ярлыке метки? Как правильно использовать h1 в HTML5 Существует ли стандартное поведение клиента для отправки пустого множественного выбора? Заполните весь фон цветом CSS 3 – Переход по шкале масштабирования в google chrome Как сделать прозрачную кнопку HTML? Узел атрибута XSLT (id) не может быть создан после того, как дочерние элементы содержащего элемента

Google Webfonts и сглаживание

Мне нравится использовать Google Webfonts для моих коммерческих работ, но они выглядят слишком зазубренными, хотя в предварительном просмотре, представленном Google, они выглядят очень гладко.

Проверьте это: http://www.google.com/fonts/specimen/Oxygen

Самый большой превью кажется очень приятным и гладким, но когда я импортирую его на свою страницу и использую его, он кажется искаженным по краям, очень зубчатым. Использует ли Google дополнительную библиотеку для достижения этого сглаживания или это я делаю что-то неправильно?

Если вы удалите шрифт из своей системы (папка windows / fonts), вы сможете увидеть ее гладкой. Чтобы преодолеть это. Не используйте @import или прямую ссылку из Google. Скорее загрузите пакет с сайта http://www.fontsquirrel.com (весь комплект шрифтов в Интернете) и используйте @ font-face в своем CSS, чтобы получить гладкие шрифты.

Шрифты визуализируются по-разному:

  • Разрешение экрана / монитора
  • браузер
  • Операционная система
  • Размер использования и намеки

Основываясь на том, что ваши шрифты выглядят хуже в Chrome и Firefox, единственное, что вы можете сделать, чтобы попытаться сделать эти браузеры лучшими. Не видя свой код, я могу только рекомендовать:

  • Убедившись, что вы используете приличный сброс css (что-то вроде этого: http://meyerweb.com/eric/tools/css/reset/ ).

  • Попробуйте добавить font-weight: normal; шрифтам, чтобы узнать, не изменилось ли это; иногда браузеры и фреймворки пытаются добавить поддельные смелые вещи.

  • Убедитесь, что вы используете фактические версии шрифтов, а не просто применяете стили CSS.

  • Если все остальное не удается, попробуйте наложить размер шрифта вверх / вниз на небольшую сумму и посмотреть, лучше ли шрифт подскажет эти размеры.

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

Я не знаю подробных технических подробностей, но Chrome может отображать шрифты по-другому, чем другие браузеры.

Вы можете попробовать указать правило font-smoothing в вашем файле CSS.

 p { -webkit-font-smoothing: antialiased; } 

Это правило часто используется. Иногда люди применяют его к каждому селектору (с * ):

 * { -webkit-font-smoothing: antialiased; } 

Три возможных значения для этого свойства:

 -webkit-font-smoothing: none; -webkit-font-smoothing: subpixel-antialiased; -webkit-font-smoothing: antialiased; 

К сожалению, я не могу воспроизвести проблему сглаживания прямо сейчас (я не знаю, почему, мой компьютер не меняет сглаживание, и все прекрасно читается, возможно, недавнее исправление Chrome, но я ничего не могу найти об этом).

Дальнейшее чтение:

  • о ClearType и Chrome: на форумах Google
  • -webkit-font-smoothing demo на Codepen.

Надеюсь, я смогу помочь. 🙂