Рубрика «векторная графика» - 12

После появления сетчаточных дисплеев люди ищут альтернативы PNG-значкам, не зависящие от разрешения. Кто-то влюбляется в шрифтовые значки, другие кричат «SVG». Сожалею, но если вы ищете панацею, то я боюсь, что её не существует. Давайте поближе поглядим, какие у нас есть варианты.

Шрифты со значками восхитительны, но…

они размыты. В них нет настоящей, попиксельной резкости. Да, использование @font-face для значков обрело заметную популярность. Я и сам рекомендовал и даже стал коллекционировать их. Но в таких значках есть изъян, который меня достаёт. Они всё ещё немного размываются на несетчаточных дисплеях (а таких до сих пор подавляющее большинство). Попробуйте поуправлять размером у Криса в демонстрации и вглядитесь попристальнее. Эффект по-разному проявляется у разных размеров, но все они имеют одну и ту же проблему «полупиксельной размытости». Возможно, её заметить не так просто, так что вот здесь я увеличил скриншот пятнадцатипиксельного размера (а заодно и фоновый шум убрал):

Нечёткость значков истомляет нас

Читать полностью »

Всякий такой веборазработчик или дизайнер сайтов, которому когда-либо доводилося ознакомиться со стилевою системою Twitter Bootstrap, уж конечно помнит, что в ней применяются значки Glyphicons (120 штук) для оформления кнопок, и панелей инструментов, и пунктов в списках, и так далее. Распространяются эти значки бесплатно и свободно (по лицензии CC BY 3.0).

У всех этих значков, однако же, есть общий недостаток: они растровые. Соответственно, если в значке есть диагональные или криволинейные элементы, то растянуть такой значок (для крупной кнопки или для сетчаточных дисплеев) не удастся без неприятной потери качества.

Преодолеть этот недостаток намерен проект Font Awesome, нацеленный на разработку бесплатного и свободного (CC BY 3.0) шрифта, содержащего аналогичные значки не в растровой, а в векторной форме. Значки («буквы») этого шрифта легко могут принимать поэтому любой размер и любой цвет. Притом их ужé и не сто двадцать, а сто сорок.

К шрифту прилагаются стилевые файлы, позволяющие начать использование Font Awesome в Twitter Bootstrap без каких-либо особенных усилий.

Читать полностью »


https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js