15 Полезни инструменти за уеб типография, библиотеки и рамки
Справянето с типографията в мрежата е истинско странно. Всеки браузър има свой собствен алгоритъм за изобразяване на шрифтове което може да доведе до неочаквани несъответствия. Има само няколко свойства на CSS, които можете да използвате, за да имате някакъв контрол върху шрифтовете, като шрифт, изглаждане на шрифтове, създаване на DropCaps и т.н..
Добрата новина е, че има ресурси, които можете да използвате, за да поемете колелото, когато става въпрос за типографията на уебсайта. Тук са 15 уеб инструменти, библиотеки и рамки можете да използвате за тази цел.
Повече за Hongkiat:
- 9 Плъгини за WordPress за повече шрифтове
- 20 Най-добри WordPress типографски плъгини за подобряване на четливостта
- По-добри и по-отчетливи UI икони с уеб шрифтове
TypeRendering
Накратко, TypeRendering работи подобно на Modernizr, освен че само идентифицира браузъра за рендиране на шрифтове. Тази библиотека добавя потребителски класове въз основа на откритията, които могат да се използват за прилагане на специфични правила за стилизиране за визуализиране на типа.
KerningJS
Kerning все още не може да се персонализира за използване в мрежата - шрифт кърнинга подкрепата все още е бедна в момента - но идва нова стандартна собственост. KerningJS е библиотека на Javascript, която ви дава няколко нови свойства за по-добър контрол на кернинга, например -писмо-Kern.
#heading -terter-kern: 1px 1px 0 0 0 1px 0 2px 0 0 0 0 0;
Имайте предвид, че горният пример не е стандартен и се прилага само с KerningJS.
DropcapJS
Въпреки че създаването на dropcap е възможно с настоящите CSS стандарти, резултатът все още не е идеален. Понякога е напълно нежелано. DropcapJS, разработена от Adobe Web Platform, е натоварена с мисията да позволи на уеб дизайнера да приложи перфектно dropcap.
LiningJS
LiningJS е JavaScript библиотека, която добавя линия клас във всеки ред от вашия абзац. Това ви позволява да оформите линията отделно. Той симулира идеята за :: тото онлайн (), :: тото-миналата Онлайн () и :: миналата Онлайн псевдокласи, които все още не присъстват в CSS. Ето пример как стилизираме първия ред на абзаца с LiningJS:
p .line [first] font-weight: 600; text-transform: главни;
В допълнение, LiningJS също поддържа китайски поток от абзаци.
UnderlineJS
UnderlineJS е библиотека на JavaScript, която прави текста по-добре подчертан. Проверете демото, за да видите какво имам предвид, не забравяйте да преминете през линиите. Сравнете демонстрацията с подчертаната продукция на текущата CSS текст-украса стандарт и вероятно ще сте фен на underlineJS.
FlowType
Този плъгин динамично ще коригира размера на шрифта въз основа на специфична ширина на обвивката. FlowType ви помага да приложите идеален брой знаци на ред на всяка ширина на екрана. Библиотеката идва с опции, където можете да зададете мин / макс ширина на екрана, мин. / Макс. Размер на шрифта и съотношение на шрифта.
HatchShow
HatchShow разширява размера на шрифта, за да запълни цялата ширина на контейнера. Приставката работи от полето с алгоритъма; накратко, измерва ширината на контейнера и дължината на шрифта и добавя правилния размер на шрифта.
GridLover
GridLover е чудесен инструмент за генериране на основни стилове за типографско оформление (размер, височина на линията и поле) с лесен плъзгач UI. Той генерира стиловете в SCSS, LESS и Stylus, така че можете да го включите веднага във вашия проект, независимо от кой CSS-препроцесор използвате.
TypeScale
TypeScale е онлайн инструмент, който ще ви помогне лесно да определите правилния размер на шрифта за вашия уебсайт. Инструментът осигурява прост интуитивен GUI за вмъкване на размер на шрифта, мащаб и семейство шрифтове, които искате да използвате. Резултатите ще се визуализират за вас, за да можете да играете с мащаба, за да получите точната стойност. Просто вземете CSS, след като сте готови.
Модулна скала
Модулна скала е инструмент за генериране на идеално мащабиране на шрифта за текст на тялото и заглавието. Той извежда в Sass, който трябва да се използва във връзка със Sass библиотеката. Алтернативно можете да използвате JavaScript .
Font-широчина
Шрифт-ширина (FTW) е библиотека на Javascript, която прави шрифт подходящ за ширината му. Тя ще определи размера на шрифта, заедно с необходимата за шрифта интервал между думите. Ако искате да направите доста заглавие, това е библиотеката, която може да искате да опитате.
FFFFallback
FFFFallback, удобен инструмент, който ви позволява да намерите най-добрия стек на шрифта, който ще се разпадне грациозно. Инструментът се предлага под формата на отметка, която ще анализира семейството на шрифтовете на страницата ви и предлага набор от шрифтове, които да се използват като резервни..
Сдвояване на шрифт
Google Font е една от най-популярната библиотека за уеб шрифтове, използвана от милиони потребители, и е домакин на над 500 семейства за шрифтове. Сдвояване на шрифт е колекция от сдвоени Google Шрифтове, където можете да намерите различна комбинация между семействата на шрифтове и лесно да въвеждате лица. Font Pair прави избора на сдвояване на шрифта малко по-малко.
TypeSettings
TypeSettings е набор от правила за CSS, които определят правилното мащабиране на шрифта, вертикалния ритъм и отзивчивото съотношение на типографията. TypeSettings се предлага в Sass и Stylus, което дава възможност за гъвкавост, за да отговори на нуждите на вашия проект чрез регулиране на променливите.
табелката
табелката вероятно е един от най-пълния стартов комплект за създаване на типография. Typeplate се доставя с няколко основни типографски стила, които адресират мащабирането, цветовете, малкия капитал, dropcap, вдлъбнатини, сричкопренасяне, blockquote, кодов блок и много други неща.
Сега прочетете: Витрина на уеб дизайни с красива типография
