Как бороться с бликами при загрузке стороннего шрифта?

Question

[Alexander Mischuk]

Гружу с google fonts, и получается так, что обычное начертание загружается нормально, а вот с жирным начертанием проблема. Появляется блик. Особенно заметно при медленном соединении.
Это всё касается только первого экрана и нужно сделать это в одном месте.
Есть мысли подменять семейство шрифтов на какое-то из безопасных, а после менять на нужное. Может быть задавать элементу жирное начертание с задержкой или после того, как нужная гарнитура загружена, но не знаю как это проверить.
Есть какие-то мысли по-этому поводу?

Comments

[Александр Вульф]

как шрифты грузите?

[Alexander Mischuk]

@mannaro: Через link

Answer 1

[Алексей Lepshiz]

Довольно простой способ для оптимизированных шрифтов - использование base64 кодирования woff шрифта:

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.eot?') format('embedded-opentype');
}

@font-face {
font-family: 'MyFontFamily';
src: url('myfont-webfont.ttf') format('truetype'),
url(data:font/woff;charset=utf-8;base64,ЗДЕСЬ_ДАННЫЕ_В_BASE64) format('woff'),
url('myfont-webfont.svg#svgFontName') format('svg');
}

woff на сегодняшний день поддерживается всеми браузерами, IE начиная с 9, Опера с 11

Comments

[Alexander Mischuk]

А в чем плюсы и минусы использования шрифтов в base64? На сколько мне известно, в обычной font-face конструкции woff грузится первым и единственным. Фоллбэки срабатывают, если нужно. Мне кажется, что это тоже самое.

[Алексей Lepshiz]

В плане очередности загрузки, разумеется, все тоже самое, но в моем примере woff не подгружается с сервера, а средствами браузера декодируется из base64 строки в файл. Т.е. шрифт хранится в css, после загрузки стилей декодируется и сразу рендерится. FOUT'a (мерцания при загрузке) нет. НО важно оптимизировать шрифты, вырезая ненужные символы, т.к. кодирование в base64 увеличивает исходный размер данных. Это позволяет www.fontsquirrel.com/tools/webfont-generator

Для примера я использую такой набор глифов:
Q,W,E,R,T,Y,U,I,O,P,A,S,D,F,G,H,J,K,L,Z,X,C,V,B,N,M,q,w,e,r,t,y,u,i,o,p,a,s,d,f,g,h,j,k,l,z,x,c,v,b,n,m,й,ц,у,к,е,н,г,ш,щ,з,х,ъ,ф,ы,в,а,п,р,о,л,д,ж,э,я,ч,с,м,и,т,ь,б,ю,ё,Ё,Й,Ц,У,К,Е,Н,Г,Ш,Щ,З,Х,Ъ,Ф,Ы,В,А,П,Р,О,Л,Д,Ж,Э,Я,Ч,С,М,И,Т,Ь,Б, ,Ю,Ў,ў,і,І,«,»

Также в конфигураторе белки «включаю» дополнительные символы:
lepshiz.net/fntsqrl.png

В итоге woff ~24кб, а после кодирования в base64 ~30кб, что совсем немного и влазит в лимит ie8 == 32кб.

По теме FOUT'a советую почитать эксперименты Пола Айриша:
www.paulirish.com/2009/fighting-the-font-face-fout
www.paulirish.com/2010/font-face-gotchas

Answer 2

[Alexander Mischuk]

Решение оказалось довольно простым.

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Перед тем, как загружается основной шрифт, то элемент прорисовывается в фоллбэчном варианте и всё, что нужно сделать это подобрать наиболее подходящую гарнитуру к основной гарнитуре.
У меня по-умолчанию была указана жирнейшая Verdana и из-за этого были проблемы со скачками и сломанной сеткой. Сменил на Arial и проблемы нет.

Answer 3

[Light 777]

Попробуйте скачать и добавить в папку с проектом, а дальше font -face

Answer 4

[Евгений Попов]

Как я понимаю под "бликом" вы подразумеваете подгрузку шрифта и подмену стандартного на тот что загружен с google fonts что может вызвать некий довольно заметный скачек и в ряде случаев влиять при отоносительных размерах на сетеку.

Есть довольно простое решение:
1. выберите как способ подключения шрифотов javascript там будет представлен пример кода WebFont Loader.
2. прописываем правило для body{opacity:0;} - установка нулевой прозрачности для body(всей страницы) по умолчанию.
3. WebFont Loader генеририрует ряд событий и состояний. Состояния помимо прочего присваевают соответстввующие классы к тегу html начинающиеся с префикса wf-*. В нашем случае нас интересует - wf-active, состояние когда все шрифты загружены.
3.1. Добавлеяем css правило html.wf-active body{opacity:1;} - возрвращаем прозрачность к номинальной, можно добавить еще анимации перехода оной, но это по вкусу.

Comments

[Alexander Mischuk]

Ага, и будет работать, как новый сайт Медузы. Это слишком радикальный способ.

[Евгений Попов]

В чем именно радикальный? Все исключительно зависит от того как использовать данный метод. Он отлично решает проблему со "скачками" и не портит впечатление от ресурса. Если же вы пишите о том что долго грузится ну дык тогда можно грузить меньше, можно добавить прелоадер да еще 1000и1 вариант, но данное решение рабочее.

[Alexander Mischuk]

А этот метод можно по-разному использовать? Прелоадер и то, что предлагаете Вы это тоже самое. В обоих случаях убивается асинхронность и всё ради чего? Ради жирного начертания в шрифте?
Подобные методы приемлемы к очень(ну, очень-очень) тяжелым одностраничкам с большим количеством изображений и анимаций.

[Евгений Попов]

Alexander Mischuk: Что вы подразумеваете под "убиванием асинхронности"? Она никуда не исчезает, мы просто делаем визуально не заметной подгрузку шрифта из Удаленного(не локального) хранилища.