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

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

описание

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

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

използването на

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

Разделянето предоставя на документа достъпност, по-голяма гъвкавост и възможности за управление. Позволява ви да се отървете от сложни и повтарящи се елементи на съдържанието.

връзка

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

Така че става ясно, че можете да свързвате стилови листове по няколко начина. Помислете допълнително.

методи

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

Ако CSS се намират отделно, те се свързват чрез маркера . Тя трябва да бъде поставена вътре и . В тази марка трябва да посочите атрибута href, който ще покаже адреса на файла с CSS.

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

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

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

шрифтове

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

Има много въпроси за това. Вероятно уебмайсторите са използвали снимката в Photoshop. Може би това беше случаят с Flash. Има опция, която използва jаvascript. Но както показва практиката, първият вариант е неудобен и бавен, вторият е остарял, а третият е твърде замоторник. За да създадете нещо ново и красиво, можете да опитате да свържете CSS шрифтовете.

свойства

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

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

семейство

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

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

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

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

В допълнение към стандартните шрифтове можете да използвате нестандартни решения. Обикновено те са по-уникални и най-вероятно няма да ги забележите на сайтовете на конкурентите. За това не е нужно да използвате снимки, jаvascript и 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, Android Browser. Както показва практиката, най-добре е да използвате TTF. Това е най-универсалният вариант, който рядко създава проблеми. Той е най-често срещаният.

правило

Така че, за да свържете шрифта на един от горните формати, достатъчно е да използвате правилото @ font-face, което споменахме по-рано. За да сте ясни, трябва да следвате определен алгоритъм. Имате файл с шрифт font.ttf. За да го използвате за основния текст, първо трябва да копирате самия файл в папката, където се намират всички файлове на сайта.

Ако искате да използвате повече от един шрифт, можете да създадете специална папка, в която да ги качите. Затова е много по-лесно да ги намерите и да променяте съдържанието на такава папка.

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

@ font-face {

шрифт-семейство: MyUniqueFont;

src: url (`fonts / font.ttf`);

}

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

Връзки

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

Ако сайтът ви е изграден на базата на WordPress, свързването на стиловете е още по-лесно. Когато трябва да замените очертанията на заглавието, просто влезте в администраторския панел. Търсете "Настройки на темата". В секцията "Типография" ще има цял списък от различни опции. Просто трябва да изберете и запазите промяната.

Други опции

Много често, за да свързвате шрифтове, използвайте услугата "Шрифтове на Google". Това е популярен инструмент за избор и свързване на стилове. Има огромен набор от шрифтове. За да ги свържете, отидете на официалния уебсайт.

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

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

данни

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