Почему можно хотеть использовать кастомные шрифты. Какой нужен оптимальный синтаксис и какие нужны форматы шрифтов для подключения. Как легко подключать кастомные шрифты в терминологии БЭМ.

1. Использование
кастомных
шрифтов
Гела
Сидорцова
Разработчик
интерфейсов
Я.Субботник,
Минск,
2
июня
2012
года
1

2. Образец подзаголовка
2
2

3. i-­‐font
3
3

4. Зачем
нам
кастомные
шрифты?
4
4

5. 5
5

6. 5
5

7. Кому
что?
6
6

8. Разным
браузерам
—
разные
форматы
шрифтов
? woff oE svg eot
7
7

9. Подключение
шрифтов
в
браузерах
8
8

10. Для
IE9
отдаем
*.woff
*.woff!
*.woff!
9
9

11. Подключение
шрифтов
в
браузерах
10
10

12. Какой
формат
какому
браузеру?
11
11

13. Какой
формат
какому
браузеру?
6-­‐8 *.eot
11
11

14. Какой
формат
какому
браузеру?
6-­‐8 *.eot
9 *.woff
11
11

15. Какой
формат
какому
браузеру?
6-­‐8 *.eot
9 *.woff
*.M
11
11

16. Инструменты
12
12

17. Дизайнеры
yandex.?
yandex.eot yandex.woff
13
13

18. fontsquirrel.com
14
14

19. 15
15

20. Важно
помнить
16
16

21. Важно
помнить
— быть
аккуратным
с
настройками
в
Rendering
-­‐
Fix
Ver]cal
Metrix
и
Remove
Kerning
17
17

22. Важно
помнить
— ставить
галочку
в
настройках
Subsedng
на
Cyrillic
при
генерации
кириллического
шрифта
18
18

23. Важно
помнить
— отсечь
ненужные
символы
19
19

24. Синтаксис
20
20

25. Синтаксис
подключения
кастомных
шрифтов
для
IE<9
общепринятый:
@font-face {
font-family: 'konkord';
src: local('konkord');
src: url('i-font_face_konkord.eot?#iefix')
format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
21
21

26. Синтаксис
подключения
кастомных
шрифтов
для
IE<9
сокращенный:
@font-face {
font-family: 'konkord';
src: local('konkord');
src: url('i-font_face_konkord.eot?#iefix')
format('embedded-opentype');
font-weight: normal;
font-style: normal;
}
22
22

27. Избавляемся
от
23
23

28. Избавляемся
от
— объявления
формата
шрифта
format('embedded-opentype')
24
24

29. Избавляемся
от
— объявления
формата
шрифта;
— стиля
и
насыщенности
font-weight: normal;
font-style: normal;
25
25

30. Избавляемся
от
— объявления
формата
шрифта;
— стиля
и
насыщенности;
— хак-­‐конструкции
...?#iefix
26
26

31. Избавляемся
от
— объявления
формата
шрифта;
— стиля
и
насыщенности;
— хак-­‐конструкции,
которая
нужна
в
случае
...
src: url('i-font_face_konkord.eot?
#iefix'),
url('i-font_face_konkord.ttf');
...
27
27

32. Подключение
css
на
проектах
*.css
6-­‐8 *.ie.css
28
28

33. Важно
— делать
проверку
на
наличие
шрифта
у
пользователя
...
src: local('konkord');
...
29
29

34. Важно
— делать
проверку
на
наличие
шрифта
у
пользователя;
— выносить
проверку
в
отдельный
дескриптор
src,
так
как
IE<9
и
Opera
10.10
не
понимают
проверку
в
общем
src
@font-face {
font-family: 'konkord';
src: local('konkord');
src: url('i-font_face_konkord.eot');
}
30
30

35. Синтаксис
подключения
кастомных
шрифтов
для
остальных
браузеров
общепринятый:
@font-face {
font-family: 'konkord';
src: local('konkord');
src: url('i-font_face_konkord.woff')
format('woff'),
url('i-font_face_konkord.ttf')
format('true-type');
font-weight: normal;
font-style: normal;
}
31
31

36. Синтаксис
подключения
кастомных
шрифтов
для
остальных
браузеров
сокращенный:
@font-face {
font-family: 'konkord';
src: local('konkord');
src: url('i-font_face_konkord.woff')
format('woff'),
url('i-font_face_konkord.ttf')
format('true-type');
font-weight: normal;
font-style: normal;
}
32
32

37. Порядок
отдачи
шрифта
src: url('konkord.woff'),
url('konkord.ttf');
33
33

38. Проблемы
кастомных
шрифтов
34
34

39. 1.
Скачки
текста
до
document.ready()
35
35

40. при
загрузке:
после
загрузки:
36
36

41. #1
костыль:
прописываем
альтернативный
шрифт
.b-logo_type_text .b-logo__link
{
font-family: Yandex, Arial,
Helvetica, san-serif;
}
37
37

42. при
загрузке:
после
загрузки:
38
38

43. #2
костыль:
скрываем
содержимое
.b-logo_type_text .b-logo__link
{
visibility: hidden;
}
39
39

44. #2
костыль:
показываем
содержимое
BEM.DOM.decl({ name : 'b-bla-bla',
modName : 'custom',
modVal : 'font' }, {
onSetMod: {
'js': function() {
this.setMod('visibility', 'visible');
}
}
});
40
40

45. при
загрузке:
после
загрузки:
41
41

46. #3
решение
для
небольших
шрифтов:
base64
@font-face {
font-family: 'YandexEn';
src: local('YandexEn');
src: url(data:font/woff; charset=utf-8;
base64,d09GRgABAAAAAAqIABAAAAAADfAAAQAAAAAAAAA
AAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcYH6Gx
kdERUYAAAGIAAAAHQAAACAANwAET1MvMgAAAagAAABOAAA
AYJSuXtAAB
+AAAAGoAAAFqx5QywWN2dCAAAAJkAAAAGgAAABoE6ANYZn
BnbQAAAoAAAAGxAAACZQ+0L6dnYXNwA...);
}
42
42

47. Тест
на
канале
1024
kbps
43
43

48. Тест
на
канале
1024
kbps
css vs style=’’...’’
43
43

49. Тест
на
канале
1024
kbps
css vs style=’’...’’
8
43
43

50. Тест
на
канале
1024
kbps
css vs style=’’...’’
WIN
WIN
8 WIN
WIN
43
43

51. 2.
Одновременная
загрузка
больше
одного
файла
44
44

52. 45
45

53. 3.
Кастомные
шрифты
в
Опере
46
46

54. 47
47

55. problem?
47
47

56. 48
48

57. Блок
i-­‐font
49
49

58. clck.ru/19aoR
50
50

59. Каждый
модификатор
–
отдельный
шрифт
i-font/
_face/
i-font_face_konkord.css
i-font_face_konkord.ie.css
i-font_face_konkord.ttf
i-font_face_konkord.woff
i-font_face_konkord.eot
51
51

60. Логотип
шрифтом
52
52

61. Шрифт
Яндекса
i-font
53
53

62. Разделение
шрифта
на
два
–
с
латинскими
символами
и
кириллицей
yandex.M
_yandex-­‐ru _yandex-­‐en
54
54

63. 55
55

64. @font-face {
font-family: 'YandexEn';
src: local('YandexEn');
src: url(data:font/woff;
charset=utf-8; base64,d09GR...),
url(data:font/truetype;
charset=utf-8; base64,AAEAAA...);
}
56
56

65. Входные
данные
57
57

66. Входные
данные
bemjson.js:
block: 'b-logo',
mods: { type: 'text' }
57
57

67. Шаблоны
b-­‐logo_type_text.bemhtml:
block b-logo, mod type text {
content: {
elem: 'logo',
content: {
elem: 'link',
mix: [ {
block: 'i-font',
mods: { face: 'yandex-ru' }
} ]
...
58
58

68. Для
чего
mix?
html:
<div class="
b-logo__link
i-font i-font_face_yandex-ru">
...
</div>
59
59

69. Для
чего
mix?
i-­‐font_face_yandex-­‐ru.css:
.i-font_face_yandex-ru
{
font-family: YandexRu;
}
60
60

70. Для
чего
mix?
b-­‐logo_type_text.css:
.b-logo_type_text .b-logo__link
{
font-size: 46px;
text-decoration: none;
color: #000;
}
61
61

71. Результат
*.woff
*.png
62
62

72. Преимущества
63
63

73. Преимущества
— сохраняется
поиск
по
тексту;
64
64

74. Преимущества
— сохраняется
поиск
по
тексту;
— онлайн-­‐переводчики
и
другой
софт
для
работы
с
текстом;
64
64

75. Преимущества
— сохраняется
поиск
по
тексту;
— онлайн-­‐переводчики
и
другой
софт
для
работы
с
текстом;
— улучшение
качества
при
зуме;
64
64

76. Преимущества
— сохраняется
поиск
по
тексту;
— онлайн-­‐переводчики
и
другой
софт
для
работы
с
текстом;
— улучшение
качества
при
зуме;
— взаимодействие
с
таблицами
стилей
для
печати;
64
64

77. Преимущества
— сохраняется
поиск
по
тексту;
— онлайн-­‐переводчики
и
другой
софт
для
работы
с
текстом;
— улучшение
качества
при
зуме;
— взаимодействие
с
таблицами
стилей
для
печати;
— line-­‐height,
text-­‐shadow,
text-­‐align,
:first-­‐lemer
и
пр.;
64
64

78. Преимущества
— сохраняется
поиск
по
тексту;
— онлайн-­‐переводчики
и
другой
софт
для
работы
с
текстом;
— улучшение
качества
при
зуме;
— взаимодействие
с
таблицами
стилей
для
печати;
— line-­‐height,
text-­‐shadow,
text-­‐align,
:first-­‐lemer
и
пр.;
— реализация
схожих
элементов
с
разной
текстовой
частью
64
64

79. 65
65

80. Гела
Сидорцова
Разработчик
интерфейсов
gela-­‐d@yandex-­‐team.ru
@gela_dd
clck.ru/19aoR
66