CSS: @anti-aliasing

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

Мой код 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;}

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

Ответ 1

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

Ответ 2

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

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

Ответ 3

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

-webkit-font-smoothing: antialiased;

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

-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

Ответ 4

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

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

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

Ответ 5

Вам нужно преобразовать OTF в WOFF:

OTF → WOFF (Works!)

TTF → OTF → WOFF (Works!)

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

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

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

2º) Преобразование OTF в WOFF https://everythingfonts.com/otf-to-woff

Используйте только WOFF not EOT, SVG, WOFF2 и т.д.