Как да свързвате CSS шрифтове: инструкция

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

Описание

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



CSS работи за посочване на визуалните характеристики на страниците в интернет. Последните трябва да бъдат създадени на базата на специални HTML или XHTML езици за маркиране.

Употреба

Кой има нужда от CSS? Свържете шрифтове, задайте цветове, поставете блокове и повече за уебмастъри, програмисти, които работят по създаването на сайт. Основната задача на каскадните таблици със стилове е визуално разделяне на структурирането. Това означава, че ако HTML формира солиден блок от текст, то CSS помага условно "да декорира" този блок, да подчертае елементите и да зададе опции. Разделянето предоставя документа с достъпност, по-голяма гъвкавост и контрол. Позволява ви да се отървете от сложни и повтарящи се елементи.

Свързване

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



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

Методи

Има четири опции, които могат да помогнат за свързване на шрифтове, CSS, присвояване на нюанс, дефиниране на блокове и т.н. Но този дизайн не харесва много дизайнери. Това се дължи на факта, че е трудно да се намерят параметрите в цялото платно на екипите и да се направи всичко. Много по-лесно е да присвоите стилове на отделен документ. Ако CSS се намират отделно, те са свързани чрез етикет. Тя трябва да бъде поставена вътре и. В този маркер трябва да посочите атрибута href, който да показва адреса в CSS файла. Ако екипите отново се съберат в отделен файл, ще ги свържем с уеб документа чрез @import инструкцията. Необходимо е да се запише между знаците. Веднага след това. Четвъртият метод включва поставянето на правилата в основата на един от маркерите, чрез атрибута style. Тогава правилата ще се отразят на отделен параметър, който е в рамките на определен текст.

Първите два метода отбелязаха появата на външни стилове, а вторите - вътрешни.

Шрифтове

Защо обикновено се използват шрифтове? Разбира се, всичкисобственикът на сайта иска ресурсът да изглежда не само красив, но и уникален. Бих искал да поставя на страниците специални елементи, които могат да бъдат разпределени между всички. Също така често ще забелязвате заглавия в менюто или нестандартни изписвания. Има много въпроси за това. Може би уебмастърите са използвали картина, изобразена в Photoshop. Може би тази версия дойде с Flash. Има вариант, който използва javascript. Но практиката показва, че първият вариант е неудобен и бавен, вторият е остарял, а третият е твърде замръзнал. За да създадете нещо ново и красиво, можете да опитате да свържете CSS шрифтове.

Свойства

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

Семейства

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

Нестандартно решение

В допълнение към стандартните шрифтове могат да се използват и нестандартни разтвори. Те обикновено са по-уникални и най-вероятно няма да ги забележите на сайтовете на конкурентите. За да направите това, не е нужно да използвате изображения, javascript и flash. Достатъчно е да се приеме правилото @ font-face. Тя позволява на потребителя да изтегли външен файл в документ. Този метод ви позволява да прикачите шрифта CSS OTF и TTF. Това са специални формати, които работят добре за подобни задачи. Проблеми могат да възникнат само с браузъра Internet Explorer. Въпреки че за пръв път започна да използва шрифтове от трети страни през 1997 г., сега той поставя тежки изисквания. Той прави много, за да развали работата ви. Той често може да компресира файл с шрифт, понякога може да го кодира. Ето защо има всички видове каки.

Формати

Понастоящем има няколко формати на шрифтове, които трябва да знаете. В противен случай ще срещнете редица несъответствия и несъвместимости. Можете да свържете шрифта CSS TTF. Този формат сега се поддържа от всички браузъри. Изключение може да бъде Internet Explorer 8 и по-ниска, както и Opera Mini 5.0-8.0.
С EOT можеработи само IE Ситуацията с WOFF е същата като при TTF. Но SVG работи в браузъри Chrome до версия 37, както и Safari, iOS Safari, Mozilla. Както показва практиката, най-добре е да използвате TTF. Това е най-гъвкавата опция, която рядко причинява проблеми. Това е най-често срещаното.

Правило

Така че, за да свържете шрифт на един от горните формати, е достатъчно да използвате правилото @ font-face, за което говорихме по-рано. За да бъде ясно, трябва да преминете през специфичен алгоритъм. Имате файл font.ttf. За да го използвате за основния текст, първо трябва да копирате файла в папката, където се намират всички файлове на сайта. Ако искате да използвате повече от един шрифт, тук можете да създадете специална папка, за да ги изтеглите. Ще ви бъде много по-лесно да ги намерите и да промените съдържанието на такава папка. Сега трябва да се уверите, че самият браузър е изтеглил нашия шрифт. За да направите това, дайте му индикация. Използваме директивата @ font-face. Командата ще изглежда така: @ font-face {font-family: MyUniqueFont; src: url ('fonts /font.ttf'); } Командата font-family отговаря за даване на името на шрифта и след като може да се използва в таблицата със стилове. Вторият ред съдържа указание за пътя, по който браузърът трябва да намери стила и да го свърже. Това не е универсален адрес. В зависимост от това къде поставяте файла в шрифта, този път също ще бъде различен. По този начин ще научите как да свържете CSS шрифт от папка.

Връзка

Ако не знаете как да свържете множество CSS шрифтове, има и ръководство за тази сметка. Тя еви позволява да определите множество файлове. Например, можете да се свържете с дузина. За да направите това, използвайте по-горе правила са @ шрифт в лице. Например, вие по-рано е бил свързан с папка файл, само да уточним нов ред връзки към настройките на шрифта. Ако сайтът е изграден върху WordPress, включете стил още по-лесно. Когато трябва да се замени заглавието на печат, просто отидете в администраторския панел. Те търсят "Тема". В раздел "типография" е списък на различни възможности. Трябва само да изберете и спаси.

Други

Той често се използва за да се свържете шрифта услуга Google Fonts. Това е популярен инструмент за подбор и връзка стилове. Има огромно количество комплекти шрифтове. За да ги свърже, просто отидете на официалния сайт. Ще видите списък с примери и възможността да експериментирате. След като добавите желания стил, не забравяйте да изберете кирилицата, ако вашият ресурс на руски. След това можете да изберете размер, стил или просто изберете няколко опции за всички поводи.
Когато ще бъде готов код, за да настроите CSS файла. В този случай, върховенството означава също така добавя. Например, ако чаршафите стил са отделен документ и да изпрати команда за първия ред. Ако стилове сте директно в HTML-файл, то тогава трябва да добавите към етикетите на тялото.

Заключения

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

Свързани публикации