Съществува голямо разнообразие от различни размери на екрана. И ние трябва да се осигури добра четливост на текста на най-малките и най-големите екрани. Например, с помощта на HTML размер на шрифта.
Уверете се, че размерът на шрифта е подходящ за всяко устройство
Има няколко начина да направите това:- Инсталиране Adaptive тема / по образец;
- С помощта на адаптивния дизайн / медийни запитвания (CSS);
- Развитието на различни версии на сайта.
1. Придобиване на адаптивна тема или шаблон
Google препоръчва адаптивен дизайн. С адаптивни теми проблем с размера на шрифта ще бъде решен.
2. Използване на медийни заявки / адаптивен уеб дизайн
Ако имате опит с CSS. и вие сте не се страхува да се научите как да карам, така че текстът да се чете лесно на екрани от всякакъв мащаб.
Как работи шрифта
размер на шрифта Стил HTML декларирани в CSS файла. Ако размерът на шрифта не е обявена, браузърът ще използва стойността по подразбиране, което е типично 16px.
В стойностите за настройка CSS размер на шрифта е както следва:
Различни единици могат да бъдат използвани за размера на шрифта: пиксела (пиксела), точки (т), ги и проценти (%).
Когато става въпрос за избор на шрифт и адаптивен дизайн, Google препоръчва следното:- Използвайте основния размер на шрифта - 16 пиксела в CSS. Регулиране на други размери, както е необходимо използване на характеристиките на шрифта;
- За определяне на печатарски скала, като се използват размери спрямо основата;
- За текст, за да се уточни вертикален интервал между символите. Общата препоръка е да се използва разстояние между редовете от 1,2 тях. което е браузърът по подразбиране;
- Използвайте ограничен брой шрифтове и типографски пропорции.
Използвайте CSS основния размер на шрифта 16 пиксела
Препоръката се посочва, че размерът на шрифта на страницата трябва да се декларира изрично - 16 пиксела. Това означава, че ще трябва да използвате стойността на размера на HTML CSS шрифт. която определя размера на шрифта на 16 пиксела за цялото село. "Body" или "HTML" Това обикновено се прави през елемента.
За определяне на печатарски скала, като се използват размери в сравнение с базовата размера
Сега, когато имаме основно размера на шрифта за цялата страница, трябва да укажете различен размер на шрифта за елементите на H1. Н2 и т.н. Тя показва повече от основата.
В изображението по-горе, за размера на шрифта HTML H1 таксува като "250%". H1 текст е два и половина пъти по-голям от основата към 16px. Това е "относителния размер". Поради това, където и ние заявяваме, размера на шрифта, той винаги ще бъде инсталиран в няколко пъти повече, по-малко или със същия размер като на база на шрифта:
Това гарантира, че няма значение какъв размер на екрана, за да видите съотношение съдържание на шрифта винаги ще остане същата. Така например, размер на шрифта H1 винаги ще бъде два и половина пъти по-база. Това също така ще се гарантира четливостта на малки екрани или мобилен телефон.
За текст, за да се уточни вертикален интервал между символите, а вероятно и за всеки шрифт е необходимо да се коригира:
Друг важен аспект на разбираемостта на шрифта е пространството между реда текст. В CSS, този хотел се нарича "линия височина".
Google препоръчва да използвате височина 1,2 линия. По подразбиране, който се използва в браузъра. Това означава, че разстоянието между реда текст ще бъде 1,2 пъти размера на шрифта стил HTML в.
За да направите това, вие трябва да декларира, височината на ред в CSS:
Проблеми с Списъка на Link
За справка, се нуждаят от повече пространство на мобилното си устройство. Това може да се превърне в проблем, когато връзките са поставени в номера или водачи списъци.
За да се реши този проблем, опитайте следното:
Използвайте ограничен брой шрифтове и печат везни
Как да направите шрифта за четене на всяко устройство
Размер на текста се контролира от медийни заявки, които са обявени за различни размери на екрана. Можем да кажем, че мобилният му е дадена размер на текста, както и за настолни компютри - от друга.
Вземем примера на заявка за медиите използва за определяне на размера на шрифта.
Този шрифт е доста чете на всички видове устройства. Особено, ако се следват всички от горните препоръки.
Проблеми могат да възникнат, когато стиловете са определени по такъв начин, че не са за мобилни устройства е по-дребен шрифт. В този случай, на мобилни устройства, този текст ще бъде още по-малко:
В такава ситуация ще се наложи да промените заявката медии. В първия пример размера на шрифта стил HTML е една и съща (100%) за стационарни компютри и мобилни устройства.
Помислете заявката медии, която ще бъде определен по-малък, по-компактен текст на компютър, но тя е по-разбираемо за малки екрани.
Този код се посочва, че текстът трябва да има размер на шрифта от 90% от стандартния размер за настолни компютри. Но на мобилни устройства ще бъде с размерите на 110%:
Това означава, че текстът е лесен за четене на различни размери на екрана.
3. Създаване на различни версии на сайта си
Превод на статията «Използвайте размери четлив шрифт» е изготвен от екип от приятелски Уеб дизайн проект от А до Я.
Свързани статии