Download as PDF, PPTX
![Важно
помнить
— быть
аккуратным
с
настройками
в
Rendering
-‐
Fix
Ver]cal
Metrix
и
Remove
Kerning
17
17](https://image.slidesharecdn.com/minsksidortsova-120731073845-phpapp01/85/slide-21-320.jpg)
![Шаблоны
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](https://image.slidesharecdn.com/minsksidortsova-120731073845-phpapp01/85/slide-67-320.jpg)
Uploaded byYandex
Ангелина Сидорцова "Использование кастомных шрифтов"
Документ обсуждает использование кастомных шрифтов в веб-дизайне и включает рекомендации по совместимости с различными браузерами. Описываются форматы шрифтов, методы их подключения и специфические настройки для работы с кириллицей. Также рассматриваются проблемы, связанные с отображением текстов до полной загрузки страницы и предлагаются решения для улучшения пользовательского опыта.
More Related Content
Similar to Ангелина Сидорцова "Использование кастомных шрифтов"
Ангелина Сидорцова "Использование кастомных шрифтов"
- 1. Использование кастомных шрифтов Гела Сидорцова Разработчик интерфейсов Я.Субботник, Минск, 2 июня 2012 года 1
- 2.
- 3.
- 4. Зачем нам кастомные шрифты? 4 4
- 5. 5 5
- 6. 5 5
- 7.
- 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.
- 17. Дизайнеры yandex.? yandex.eot yandex.woff 13 13
- 18.
- 19. 15 15
- 20.
- 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.
- 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.
- 39. 1. Скачки текста до document.ready() 35 35
- 40.
- 41. #1 костыль: прописываем альтернативный шрифт .b-logo_type_text .b-logo__link { font-family: Yandex, Arial, Helvetica, san-serif; } 37 37
- 42.
- 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.
- 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.
- 58.
- 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.
- 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.
- 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.
- 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