Проблемът с принципите на @ шрифт лице
Проста и ясна, но, за съжаление, на стандартните правила за обработка @ различни видове шрифтове в повечето браузъри е проблематично. Когато се свържете с външен уеб шрифтове, използващи @ шрифт лицето, повечето браузъри ще направят всеки текст, към който се прилага на шрифта, напълно невидими за времето за зареждане на външния шрифт. [Вж. Фиг. 1]. Някои браузъри ще чакат да изтеглите шрифт за предварително зададен период от време (обикновено три секунди), преди това ще покаже текста, като се използва алтернативен шрифт, посочен в имот шрифт семейство. Но браузъри, за да "двигател» WebKit (Safari, стандартната браузъра на Android, Blackberry), точно като всеотдаен малко куче ще чакат вечно (добре, обикновено 30 или повече секунди) изтеглят желания шрифт. Това означава, че вашите персонализирани шрифтове представляват потенциална "единична точка на отказ" за достъпна уебсайт.
Фиг. 1: уеб страница скрийншот заредена в IOS Safari, където текстът е невидим При зареждането на потребителски шрифтове.
HTML5 и CSS3 практика от нула до резултата!
Например, на фиг. 2 показва времева линия на webpagetest.org сайт. който показва как filamentgroup.com сайт ще изглежда със стабилна 3G връзка, ако използвате поведението по подразбиране при изтегляне на шрифтове. Имайте предвид, че текстът на която се прилага правилото @ различни видове шрифтове, започва да се появява само след пълно втори след първоначалното оказване:
Фиг. 2: Временно нишки Група за зареждане на уебсайта линия (да се използват стандартни изтегляне шрифтове). Когато връзка свалянето шрифтовете на 3G забавени пълна секунда.
Нашите потребители се нуждаят от готови страница, възможно най-рано - в идеалния случай рамките на една секунда - това е, ние трябва да направи текста започнаха да се появяват възможно най-близо до този показател. Съществуват няколко подхода, които могат да бъдат използвани в този случай, но най-основната което можете да направите - е да се откаже от стандартния начин за изтегляне на шрифтове, които споменахме по-рано.
Това са критериите, които трябва да следвате при оценката на подхода за зареждане на шрифтове:
CSS искане, съдържащо правило (и) на различни видове шрифтове, не трябва да блокират изобразяването на страницата. Вместо да свързвате шрифтовете през елементаЗаявки, шрифтове трябва да бъдат конфигурирани така, че когато те са заредени показва алтернативен текст, който ще се избегне излъчване / отблясъци при зареждане на текст (на възпламеняване на невидим текст или Foit).
Как да изтеглите шрифтове в нажежаема Group
Стъпка 1: Подготовка на шрифтовете
Потребителски шрифтове могат да бъдат много трудни, така че трябва на първо място да се намали броят на шрифтове, за да изтеглите. Не забравяйте, че всяка версия на наситеността (редовна, светлина, смел) и стил (редовна курсив, удебелен курсив) шрифт е отделен файл, който може бързо да увеличи общия размер на изтеглените шрифтове. Опитайте се да запазите общия брой на персонализирани шрифтове не превишава 5 броя, но ние обикновено, ако е възможно, опитайте се да се използва 2-3 шрифт.
За по-нататъшно подобряване на доставката на шрифтове, да се използва техниката на "разделяне" на шрифта, който ви позволява да премахнете от буквите на текста и символите, които не са ви нужни. С FontSquirrel услуга е доста лесно да се направи.
Стъпка 2: Изготвяне на стилове на шрифта
кодировка на шрифта с данни: URI
Да предположим, че използвате шрифта Open Sans в две версии насищане: 400 и 700 (удебелен). В подкрепа на най-голям брой браузъри, ние се нуждаем от три различни формати за всеки вариант: WOFF2, WOFF и TrueType (TTF):
HTML5 и CSS3 практика от нула до резултата!
Ако не разполагате с, например, един от следните формати, можете да го създадете с помощта на генератора на шрифта Шрифт катерица.
След това вземете всеки един от тези файлове, за да отпечатате и да ги кодира за последващо вмъкване в лист стил с помощта на данни: URI. Ако не сте запознати с това как да го направя, има много възможности: Sass (Компас), PHP, онлайн генератори или OpenSSL на командния ред (OpenSSL base64 -в filename.woff).
Копирайте резултатите в три отделни стилове, а CSS файл за всеки формат: WOFF2 (данни woff2.css), WOFF (данни woff.css) и TTF (данни ttf.css за Android). Ето, например, може да изглежда като данни woff.css:
Вътре всички други файлове с шрифтове рекорд SRC: формат URL (...) (...) трябва да отговаря на определен формат. Така например, в данни woff2.css файл, който ще бъде даден URL ( «данни: заявление / шрифта woff2; набор знаци = UTF-8; base64, ...») формат ( «woff2"); и за данни ttf.css - URL ( «данни: заявление / х-шрифт TTF; набор знаци = UTF-8; base64, ...») формат ( «TrueType»);
Стъпка 3: Настройте стилове обувка
След шрифт е изготвен, ние трябва да го заредите асинхронно да избегнете отблясъци / трептене текст. Ние използваме това за нашата полезност loadCSS. Например, тук е как можем да използваме loadCSS да изтеглите шрифтове WOFF2 формат:
Разбира се, ние трябва да изтеглите подходящия стил лист шрифт за всеки браузър, посетете нашия сайт. Как да се определи в какъв формат да се използва? По подразбиране, ние използваме WOFF формат, благодарение на своята широка подкрепа браузър. Ако браузърът се тества в подкрепа WOFF2 формат, ние използваме WOFF2 формат поради размерите си е типично 30% по-малко. Ако сме достатъчно уверени, за да се определи, че текущия браузър е браузърът по подразбиране на Android «двигател» Webkit (не Chrome), ние премине към формат TTF с поддръжка за Android 4.x. Не забравяйте, че ако неправилен формат е заредена, браузърът просто ще използва алтернатива на местните шрифтове.
Браузърът няма да направите текста невидим, защото нашата CSS файл с данни: URI е зареден асинхронно. Това означава, че ще бъде възможно да се прочете алтернативен текст, докато има натоварване на нашите уеб шрифтове (дори ако искането е "висяха" и не е получен отговор).
Фиг. 3: Успех! Ето една времева линия изтеглите нашия сайт с помощта на нашия метод за сваляне на персонализирани шрифтове. Ако използвате 3G връзка, шрифтът е вече избрана по време на първоначалното предоставяне.
Ние използваме "бисквитки", за да направи още по-добре
В този момент ние сме фокусирани върху подготовката и внимателен изтеглихте персонализиран шрифт. По този начин, можем да покажем на алтернативен шрифт, докато чакаме с мишката ни персонализиран шрифт. Когато желания шрифт е наистина натоварен, браузърът ще замени стандартните шрифтове на обичай. Това ще доведе до pereotrisovku и обикновено малки промени в оформлението, тъй като Шрифтове имат малко по-различни размери. Ние вярваме, че когато за първи път посещават страниците на тази "жертва" е оправдано, тъй като ние от време на време предоставят на потребителите по-бързо завършен страница, но тази ситуация може да дразни потребителите с навигацията в сайта.
За да се реши този проблем, ние използваме бисквитки, за да се определи дали заредени потребителски шрифтове, както и дали те са в кеша на браузъра. Ако отговорът е да, тогава ние веднага ще покаже персонализирани шрифтове, за да се избегнат всякакви промени в маркирането.
В горния код изисква специален модул на Apache сървър. но можете да използвате нещо подобно на всеки език сървър.
За да научите повече за този подход, като се използват бисквитки, ние също, приготвено за вас изходния код на GitHub.
резюмиране
С помощта на уеб шрифтове наистина може да бъде един чудесен начин да се подобри качеството на вашия уеб дизайн, но шрифта изтегляне по обичайния начин може да бъде много вредно за изпълнението възприема от потребителя на сайта. Горният метод се справя с проблема с невидим текст, обикновено свързана с върховенството на @ различни видове шрифтове, както и много по-бързо прави нашите страници на разположение на потребителите. Надяваме се, че (и вашите потребители) би било полезно!
Редакция: Екип webformyself.
HTML5 и CSS3 практика от нула до резултата!
Най-IT новини и уеб разработки на нашия канал Телеграма