CSS: @ font-face anti aliasing

Question

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

Мой код CSS:

@font-face {
font-family: 'YanoneKaffeesatzThin';
src: url('../fonts/yanonekaffeesatzthin-webfont.eot');
src: local('☺'), url('../fonts/yanonekaffeesatzthin-webfont.woff') format('woff'), url('../fonts/yanonekaffeesatzthin-webfont.ttf') format('truetype'), url('../fontsyanonekaffeesatzthin-webfont.svg#webfontyC5sm3N9') format('svg');
font-weight: normal;
font-style: normal;}

Что осталось сделать, чтобы сделать это последним, нораздражает, проблема исчезнет?

Answer 1

Также см .: http://www.elfboy.com/blog/text-shadow_anti-aliasing/

Суть в том, что добавление text-shadow: 0 0 1px rgba(0,0,0,0.3); создает видимость сглаживания.

Answer 2

В CSS3 вы можете использовать свойство font-smooth , хотя сглаживание будет по-прежнему контролироваться системными настройками по умолчанию. Если вам действительно необходимо принудительно установить чистое сглаживание, независимо от того, какая у вас ОС, вы должны использовать sIFR, который автоматически заменяет текст компонентом Flash.

Answer 3

Просто короткое замечание о не очень распространенном правиле CSS для борьбы с смачиванием.

-webkit-font-smoothing: antialiased;

У вас будет небольшое изменение в рендеринге шрифтов для веб-браузеров. Обычно шрифт выглядит более четким и тонким. Другие значения:

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

Демонстрационная страница: http://maxvoltar.com/sandbox/fontsmoothing/

Не забыть https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Webkit_Extensions

Answer 4

Cufon и Typeface.js - это два решения, которые объединяют и дезинфицируют многие решения HTML5, CSS3 и JS, обсуждаемые в этой теме.

У каждого есть конвертер, позволяющий преобразовывать файлы шрифтов (ttf, otf, wotf) в сценарии, которые делают то, что вы пытаетесь сделать - доставлять любой шрифт через Интернет с сглаживанием.

Из двух я предпочитаю Cufon http://cufon.shoqolate.com/generate/

Answer 5

Вам нужно конвертировать OTF в WOFF:

---

OTF -> WOFF (работает!)

TTF -> OTF -> WOFF (работает!)

TTF -> WOFF (не работает сглаживание, распространенная ошибка в Google Fonts )

---

1º) Загрузить версию шрифта OTF

1º альтернатива) Если шрифт другой и является TTF, конвертируйте его в OTF с помощью https://everythingfonts.com/ttf-to-otf

2º).EOT, SVG, WOFF2 и т. Д.