Back to Question Center
0

Подобрете уеб типографията с CSS Font Size Adjust            Подобряване на уеб типографията с CSS Размер на шрифта Регулирани теми: CSSBootstrapSassFrameworksAudio & Semalt

1 answers:
Подобряване на уеб типографията с CSS Font Size Adjust

Подобрете уеб типографията с CSS Font Size AdjustПодобряване на уеб типографията с CSS Размер на шрифта Регулирани теми:
CSSBootstrapSassFrameworksАудио и семал

Тази статия беше прегледана от Панайотис Мацинопулос. Благодарение на всички партньорски рецензенти на SitePoint за това, че съдържанието на SitePoint е най-доброто, което може да бъде!

Свойството на CSS за размер на шрифта позволява на разработчиците да посочат размер на шрифта на базата на височината на малките букви вместо главни букви. Това може значително да подобри четливостта на текста в мрежата - temp monitoring pc.

В тази статия ще научите за важността на свойството за настройка на размера на шрифта и как да го използвате правилно във вашите проекти.

Значението на коригирането на размера на шрифта

Повечето уебсайтове, които посещавате, се състоят основно от текст. Тъй като писмената дума е толкова важна част от уебсайта, има смисъл да обърнете специално внимание на шрифта, който използвате, за да показвате информацията си. Избирането на правилния шрифт може да доведе до приятно четене. Семалт, използвайки грешния, може да направи сайта незачитаем. След като сте решили шрифта, който искате да използвате, обикновено изберете подходящ размер за него.

Формата на шрифта определя размера на всички опции за семейство шрифтове , които искате да използвате на уебсайт. Обикновено обаче по принцип е избран по такъв начин, че вашият първи вариант за семейство да изглежда добре. Проблемът възниква, когато първият избор не е налице поради някаква причина и браузърът изобразява текста с помощта на един от резервните шрифтове, изброени в документа CSS.

Например, предвид това правило за CSS:

     тяло {шрифт-фамилия: "Lato", Verdana, sans-serif;}     

Ако "Lato", който вашият браузър изтегля от Google шрифтове, не е наличен, вместо него ще се използва следващият резервен шрифт, в този случай Verdana. Обаче е вероятно стойността размер на шрифта да е избрана с "Lato", а не с Verdana.

Каква е аспектната стойност на уеб шрифт?

Очевидният размер на шрифта, както и неговата четливост, могат да се различават значително за една постоянна размер на шрифта . Това е особено вярно за скриптове като латински, които разграничават горните и малките букви. В такива случаи съотношението на височината на малки букви към главните им екземпляри е важен фактор при определянето на четливостта на даден шрифт. Това съотношение обикновено се нарича аспектна стойност на шрифт.

Както споменах по-рано, след като зададете стойност размер на шрифта , тя ще остане постоянна за всички семейства шрифтове. Това обаче може да повлияе на четливостта на резервния шрифт, ако стойността му на аспект е твърде различна от тази на първия шрифт.

Ролята на свойството за настройка на размер на шрифта става много важна в такива ситуации, тъй като ви позволява да зададете височината на всички шрифтове на една и съща стойност, като по този начин подобрите тяхната четливост.

Изборът на подходяща стойност за настройка на размера на шрифта

Сега, когато знаете колко е важно да използвате свойството за настройка на размера на шрифта , е време да научите как да го използвате на уебсайта си. Тази собственост има следния синтаксис:

     настройка на размера на шрифта: няма  <номер>      

Началната стойност на коригиране на размера на шрифта е няма . Стойността няма означава, че няма да бъде направена корекция на стойността на размер на шрифта на различни шрифтови семейства опции.

Можете също да зададете стойността на свойството за настройка на размера на шрифта на номер. Височината x е равна на даденото число, умножено по размер на шрифта . Това може значително да подобри четливостта на шрифтовете при малки размери. Ето един пример за използване на собственост за настройка на размер на шрифта .

     размер на шрифта: 20px;размер на шрифта: 0.6;     

Височината на всички шрифтове ще бъде 20px * 0. 6 = 12px. Действителният размер на даден шрифт вече може да бъде променен, за да се увери, че височината x винаги остава на 12 пиксела. Новият коригиран размер на шрифта на даден шрифт може да бъде изчислен, като се използва следната формула:

с = (а / а ') s .

с е коригиран размер на шрифта за използване, s ) a е стойността на аспекта, определена от свойството за регулиране на размера на шрифта и a ' е аспектната стойност на шрифта, която трябва да се коригира.

Не можете да настроите размер на шрифта до отрицателна стойност. Стойност 0 ще доведе до текст без височина. С други думи, текстът ще бъде ефективно скрит. В по-старите браузъри, като Firefox 40, стойността 0 е еквивалентна на настройката размер на шрифта до няма .

В повечето случаи разработчиците обикновено експериментират с няколко стойности на шрифта , за да видят какво изглежда най-добре за даден шрифт. Това означава, че в идеалния случай те биха искали х-височината на всички опции за шрифтове да е равна на височината x на първия им шрифт за избор. С други думи, най-подходящата стойност за свойството за настройка на размер на шрифта е стойността на аспекта на първия ви шрифт за избор.

Как да разберете аспектната стойност на шрифта

За да определите правилната стойност на шрифта, можете да разчитате на факта, че нейният размер на шрифта трябва да е същият като оригиналния размер на шрифта , Това означава, че a трябва да бъде равно на a ' в предишното уравнение.

Първата стъпка за изчисляване на стойността на аспекта е създаването на два елемента. И двата елемента ще съдържат една буква и една граница около всяка буква (буквите трябва да бъдат еднакви и за двата елемента , защото ще трябва да направим сравнение между тях. Също така и двата елемента ще имат същата стойност за свойството размер на шрифта , но само една от тях ще използва свойството размер на шрифта . Когато стойността на размер на шрифта е равна на аспектната стойност на даден шрифт, и двете букви във всеки елемент ще имат същия размер.

В следващата демонстрация създадох граница около буквите "t" и "b" и приложих различна стойност за коригиране на размера на шрифта за всяка двойка.

Следете съответния фрагмент:

    . коригирано-a {размер на шрифта: 0.4;}. коригирано-b {размер на шрифта: 0. 495;}. коригиран c {размер на шрифта: 0.6;}     

Както можете да видите в демо версията по-долу, по-висока стойност на коригиране на размера на шрифта прави буквите по-големи, а по-ниската стойност намалява буквите. Когато настройката на размера на шрифта стане равна на стойността на аспекта, двойките достигат равни размери.

Вижте кода за определяне на аспект на Pen чрез SitePoint (@SitePoint) на CodePen.

Използване на настройка на размера на шрифта в уеб сайтове

Следната демонстрация използва стойността , която бе изчислена в предишната демонстрация на CodePen за шрифта "Lato", за да коригира шрифта на "Verdana" , който действа като резервен шрифт. Бутонът ще включи или изключи настройката, за да може сами да видите разликата:

Вижте Pen Използвайки настройките на размера на шрифта на Websites чрез SitePoint (@SitePoint) на CodePen.

Ефектът е по-забележим, когато работите с по-голяма част от текста. Семалт, горният пример трябва да е достатъчен, за да ви даде представа за полезността на тази собственост. Започвайки от версия 43 и 30, Chrome и Opera поддържат тази собственост зад знамето "Експериментална платформа на уеб платформата", която може да бъде активирана в chrome: // flags. Edge и Safari изобщо не поддържат имота за настройка на размера на шрифта .

Ако решите да използвате тази собственост, по-ниската поддръжка на браузъра не би трябвало да е проблем изобщо. Този имот е проектиран с обратна съвместимост. Неподдържащите браузъри ще покажат текста нормално, докато поддържащите браузъри ще коригират шрифта въз основа на стойността на свойството за настройка на размера на шрифта .

Заключение

След като прочетете урока, вече знаете какво прави имота за настройка на размер на шрифта , защо е важно и как да се изработи стойността на аспект на различните шрифтове.

Тъй като коригирането на размера на шрифта се градира грациозно в по-старите браузъри, можете да започнете да го използвате днес, за да подобрите четливостта на текста в производствените уеб сайтове.

Знаете ли някои други инструменти или съвети, които могат да помогнат на потребителите бързо да изчислят стойностите на аспекта на даден шрифт? Нека другите читатели да знаят в коментарите.

March 1, 2018