CSS: @ font-face anti aliasing

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

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

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

источник

2010-08-10 Ben

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

источник

2010-08-10 17:41:49 Chman

Спасибо за ваш ответ, сейчас я пытаюсь использовать sIFR. – Ben

Я также могу рекомендовать Cufón вместо sIFR, так что вам не нужна Flash для просмотра шрифтов (я думаю о всех пользователях Flashblock и о пользователях iPhone/iPad, кроме тех, кого просто раздражает Flash): http://cufon.shoqolate.com/generate/ – Jonas

https://developer.mozilla.org/en/CSS/font-smooth: font-smooth был удален из спецификации шрифта CSS и в настоящее время не находится на стандартной дорожке , Некоторые мобильные браузеры поддерживают его. Webkit поддерживает что-то подобное. – commonpike

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

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

источник

2010-10-25 06:02:43 user9538

Спасибо! +1 для вас;) – Ben

Очень хороший ответ! Отлично! – Jensen2k

:-) отличный CSS3 взломать! – markus

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

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

Из этих два я предпочитаю cufón http://cufon.shoqolate.com/generate/

источник

2011-09-09 06:46:43 Rowan

Просто короткую записку о не столь общем правиле 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

источник

2013-12-29 04:41:08 Steve

Вы должны преобразовать OTF в WOFF: - (! Works)

OTF> Уофф

TTF -> OTF -> WOFF (Works!)

TTF -> Уофф (Не работает antialising, общая ошибка в Google Fonts)

1º) Скачать альтернативу OTF font version

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

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

Использовать только WOFF не EOT, SVG, WOFF2 и т. Д.

источник

2016-01-05 15:35:59 lucasgabmoreno

ответ

Смежные вопросы