Паслядоўная CSS-шрыфты з выкарыстаннем Google Font і Cufon

1. Сямейныя шрыфты
2. Google Шрыфты
3. Куфон

Адзін з самых значных кампанентаў унікальнасці і дызайну вэб-сайтаў вызначаецца шрыфтоў. Вашы шрыфты не толькі з'яўляюцца асновай вашага інтэрнэт-брэндынгу, але і могуць павысіць агульны досвед карыстальнікаў і паводзіны на сайце.

Агульная праблема ў большасці сайтаў заключаецца ў тым, што паказаны шрыфт можа адрознівацца ў залежнасці ад прагляду браўзэра, аперацыйнай сістэмы і / або прылады. Калі вы жадаеце захаваць тыпаграфіку і стылі як мага больш паслядоўнымі паміж портамі прагляду, вы можаце выкарыстоўваць наступныя метады інтэграцыі:

Сямейныя шрыфты

• Сайт: Стэк шрыфтоў CSS
• Плюсы: Хуткая загрузка, сумяшчальная з усімі прыладамі, АС і браўзэрамі
• Мінусы: Шрыфты павінны быць устаноўлены лакальна на прыладзе прагляду

Вы можаце паказаць шрыфт з сямействам шрыфтоў: "Century Gothic"; на вашым вэб-сайце CSS, але калі на прыладзе, якое выкарыстоўваецца для прагляду вашага сайта, не ўсталявана "Century Gothic", то для адлюстравання змесціва будзе выкарыстоўвацца агульны шрыфт, таксама вядомы як рэзервовы рэжым .

Агульныя сямейныя шрыфты будуць выкарыстоўвацца браўзэрам / аперацыйнай сістэмай, калі ўсе астатнія сем'і змогуць адмовіцца, што можа быць альбо serif, sans-serif, альбо монопространством.

сямейства шрыфтоў: "Helvetica Neue", Helvetica, Arial, sans-serif;

Прыведзены вышэй CSS будзе спрабаваць адлюстроўваць змесціва ў "Helvetica Neue" ці, калі аперацыйная сістэма не ўсталявана, ён будзе спрабаваць выкарыстаць наступны шрыфт Helvetica і гэтак далей. Напрыклад, кампутар Apple часта будзе мець "Helvetica Neue", такім чынам, ён будзе адлюстроўвацца ў Інтэрнэце, а ПК Windows можа адлюстроўвацца з дапамогай "Helvetica" ці менш.

Google Шрыфты

• Сайт: Google Webfonts
• Плюсы: Паслядоўны дысплей, незалежна ад АС
• Мінусы: Павелічэнне загрузкі старонкі

Адным з найбольш модных крыніц убудавальных шрыфтоў з'яўляюцца шрыфты Google. Вы можаце інтэграваць Google Webfonts, проста выбраўшы патрэбныя шрыфты, адпаведныя стылі і вагу і ўстаўляючы іх у крыніцу вашага сайта. Чым больш сем'яў шрыфтоў і варыяцый вы выбіраеце для ўстаўкі на свой сайт, тым больш будзе павялічвацца яго загрузка старонак, якую вы можаце вымераць падчас працэсу выбару Google Font.

Код устаўкі Прыклад

<link href = 'http: //fonts.googleapis.com/css? Family = Gabriela' rel = 'styleheet' type = 'text / css'>

Пасля ўстаўкі табліцы стыляў вы можаце проста ўключыць сямейства шрыфтоў праз CSS, выкарыстоўваючы першы метад вышэй. Выкарыстанне шрыфтоў Google гарантуе роўнае адлюстраванне выбраных шрыфтоў ва ўсіх браўзэрах і аперацыйных сістэмах.

Куфон

• Сайт: Cufon Генератар
• Плюсы: Зрабіце любыя шрыфты вэб-бяспечнымі і паслядоўнымі
• Мінусы: Большая старонка-загрузка з малюнкаў Cufon; Патрабуецца JS

Больш стомным спосабам, але дазваляе выкарыстоўваць любыя ўсталяваныя на кампутары шрыфты, з'яўляецца Cufon. Гэты метад патрабуе, каб усе шрыфты, якія мы плануем выкарыстоўваць, былі камерцыйнымі бясплатнымі, альбо калі няма, купляецца камерцыйная ліцэнзія.

Сямейства шрыфтоў можа быць загружана і пераўтворана ў Cufon, які стварае малюнак для кожнага лікавага, алфавітнага і спецыяльнага знака, даступнага ў загружаных сем'ях шрыфтоў.

Згенераваны файл Cufon затым убудаваны на вэб-сайт, а Javascript выкарыстоўваецца для "Cufon" патрэбных элементаў HTML, які замяняе тэкст малюнкамі для дакладнага адлюстравання шрыфта.