Как да използваме най-добре шрифтовете в CSS?

Тази статия ще ви запознае с проста, но важна тема, която е Fonts In и също така ще ви даде практическа демонстрация по темата. Следните указания ще бъдат обхванати в тази статия,

• Шрифтове в CSS
• Атрибути в CSS шрифт
• атрибут в стил шрифт
• атрибут тегло на шрифта
• атрибут размер на шрифта
• атрибут семейство шрифтове

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

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

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

За изчерпателен CSS урок посетете Edureka CSS Tutorial for Beginners. Ще получите отлична информация за начина, по който CSS трябва да се използва за увеличаване на HTML уеб дизайна.

Продължавайки с тази статия за Шрифтове в CSS

Шрифтове в CSS

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

Пример 1: Заглавия и абзаци в различни шрифтове

body {background-color: lightblue} h1 {font: bold 30px arial, sans-serif} h2 {font: 15px verdana} p {font: italic bold 12px / 30px Georgia, serif}
Абзацът с курсив получер шрифт Georgia
 

 Пример 1: Резултат 

В пример 1 имаме 3 различни реда текст в различни шрифтове. Ще забележите, че всеки от шрифтовете се различава по ширината на символите, вдлъбнатините и т.н.

Продължавайки с тази статия за Шрифтове в CSS

Атрибути в CSS шрифт

CSS шрифтовете имат 4 основни атрибута - стил, тегло, размер и семейство. Атрибутът style означава нормален или курсив. Теглото показва шрифта като обикновен или удебелен. Теглото може да се изрази и цифрово. Размерът е просто размерът на шрифта по-голям, колкото по-голям е текстът Има няколко начина, по които може да се присвои размер на шрифта, подробни описания са дадени в следващите раздели. Атрибутът на семейството е да присвои името на шрифта на текста.

В пример 1 използвахме различни имена на шрифтове за заглавията и абзаца. Под маркерите h1 и p виждаме изброени две имена на шрифтове, докато етикетът h2 назовава само един шрифт. Това е определението за семейство шрифтове, повече за това по-късно.

Продължавайки с тази статия за Шрифтове в CSS

атрибут на стил на шрифт:

Двата основни стила могат да бъдат зададени като „нормален“ и „курсив“. Предполага се, че курсивът е с наклонен характер с наклон. Нормално е опцията по подразбиране, която е права. Има още една по-малко използвана опция, наречена „наклонена“, която прилича на опцията с курсив в повечето шрифтове. Можете също така да зададете стила да ‘наследява’, така че да взема стила на шрифта от своя родителски елемент.

Продължавайки с тази статия за Шрифтове в CSS

атрибут font-weight:

Този атрибут решава дали шрифтът да изглежда дебел или тънък. Може да бъде зададено на „нормално“ или „получер“. Стойността по подразбиране е нормална. Тази стойност може да бъде зададена и като числова. Теглото от 400 представлява нормално, а 700 е за получер. Има няколко други настройки (вариращи от 100 - много леки до 900 - много удебелени), но те не се поддържат от всички шрифтове. Всички опции за тегло са показани в пример 3.

Продължавайки с тази статия за Шрифтове в CSS

атрибут размер на шрифта:

Атрибутът размер може да бъде зададен по няколко начина. Нека изброим тези начини по-долу.
● Изброена стойност като „средна“, „голяма“. Всъщност точно като размерите на дрехите, стойностите могат да варират от XX Small до XX Large!
● Задайте спрямо неговия родителски елемент като „по-голям“ или „по-малък“.
● Процент от размера на родителския елемент.
● Задайте като „наследяване“, за да приемете директно размера на родителския елемент.
● Като абсолютна стойност в мерните единици px (пиксели), pt (точки) или cm (сантиметър)
‘Среден’ е стойността по подразбиране, зададена за този параметър.

Продължавайки с тази статия за Шрифтове в CSS

атрибут на семейство шрифтове:

В HTML семейството на шрифтовете CSS е за задаване на името на шрифта. Можете или просто да поставите едно име на шрифт с маркера. Или можете да присвоите множество стойности като списък със семейство шрифтове, който определя приоритета, при който браузърът трябва да избере шрифта.
Списъкът е с приоритет отляво надясно под формата на резервна система. Избира се първата стойност, ако е налична, или контролът преминава към следващата, докато се стигне до края на списъка. Семейството на шрифтовете по подразбиране се определя от предпочитанията на браузъра.
Семействата на CSS шрифтове са от 2 типа - родови семейства и семейства шрифтове.
● Общи семейства - въз основа на някои общи характеристики, шрифтовете се групират като „serif“, „sans serif“, „monospace“ и др. Например, Sans serif означава шрифтове без стила на serif.
● Фамилни имена - шрифтове, принадлежащи към конкретни семейни йерархии. Times, Arial, Courier са всички семейства шрифтове, а Times New Roman е примерен шрифт от семейството на Times.
Различните опции за използване на семейството шрифтове са изброени в пример 4 по-долу.

Някои общи моменти, които трябва да се отбележат

● Подобно на няколко други CSS свойства, някои от настройките на шрифта се различават в различните браузъри. Проверете за поддръжка на браузъра, преди да използвате някои редки настройки на шрифта.
● Можете да зададете настройки на шрифта поотделно, като използвате отделните маркери за стил на шрифта, тегло на шрифта и др. Ако предпочитате компактен код, можете да използвате атрибута на стенографския шрифт с всички стойности в същия ред.
● В потребителски сценарии, при които искате шрифтът да се различава по размер в зависимост от размера на браузъра, има полезна настройка за размер на шрифта, наречена адаптивна настройка на шрифта. Може да се настрои с vw единица, което означава „ширина на прозореца за гледане“. По този начин размерът на текста ще следва размера на прозореца на браузъра.

Надявам се, че сте намерили информацията, която търсите в Шрифтове в CSS. Споделете своя опит с нас в раздела за коментари по-долу. Честит дизайн!

Ако се интересувате да научите повече за уеб разработката, разгледайте от Edureka. Обучението за сертифициране на уеб разработки ще ви помогне да научите как да създавате впечатляващи уеб сайтове с помощта на HTML5, CSS3, Twitter Bootstrap 3, jQuery и Google API и да го внедрите в Amazon Simple Storage Service (S3).