Видео
Выбор разделов 
| Поиск |
Дизайн
FontAwesome / Icons8 или Apple Symbols / Segoe MDL2 |
cherepets |
1
|
Нейтральная сторона 0
|
4
|
|
Сторонние иконочные ширфты
|
Прежде чем писать комментарии или выбрать сторону вы должны авторизироваться! |
Встроенные в систему
|
cherepets
15-11-2016 11:14
0
В вебе безграничная популярность FontAwesome понятна - ожидать определенного шрифта от любого браузера - странно, проще прогрузить какой-то сторонний.
Но стоит ли их подобные решения применять при разработке мобильных приложений (например, чтобы приложение смотрелось более похожим на разных платформах) или лучше для каждой платформы воспользоваться тем что нам предлагает Apple/Microsoft/Google?
0 комментариев
opera.rulez
15-11-2016 14:15
0
В вебе я против иконочных шрифтов и вообще против загружаемых шрифтов, ибо по непонятным причинам на некоторых страницах в некоторых браузерах внезапно вместо символов могут появиться пустые квадратики. К сожалению, браузер не сообщает, по какой причине выводит квадратики, поэтому такой глюк даже исправить нельзя.
В нативных приложениях же лучше будут смотреться элементы оформления, похожие на системные.
32 комментария
cherepets
15-11-2016 14:18
+1
opera.rulez, А какая альтернатива иконочным шрифтам в вебе?
В теории SVG, но в браузерах проблемы с его реализацией (в первую очередь низкая производительность).
opera.rulez
15-11-2016 14:36
0
cherepets, Возможно, я сгущаю краски, но несколько раз нарывался на то, что некоторые сайты показывали квадратики, хотя файл шрифта загружался. Причём не только у меня: в интернетах видел кучу скриншотов похожей ситуации, сделанных разными людьми.
Самому воспроизвести глючащий сайт мне не удалось. Может быть, на глючном сайте был плохо собранный шрифт, в котором какая-нибудь из таблиц отсутствовала или была плохо заполнена. Если ещё раз на такое нарвусь, надо будет не забыть скопировать глючный шрифт, чтобы узнать, что с ним не так.
Странно, что ловил глюк на сайтах Адоба и Гугла (на последнем шрифт Roboto иногда показывал квадратики вместо символов кириллицы, хотя он должен работать безотказно, ведь это с некоторых пор стандартный шрифт Андроида), но при этом в Твиттере иконочные шрифты ни разу не глючили. Возможно, проблема где-то в табличках поддержки диапазонов Unicode.
*****
Стопроцентно работающей альтернативы (кроме растра) я не знаю. Кстати, в старых IE надо было ещё использовать VML вместо SVG.
opera.rulez
15-11-2016 15:32
0
cherepets, Восьмой даже в деве предлагал оставить НовыеХоливары, СоздатьХоливар — вот это всё растром. Может быть, у растра всё-таки есть хоть какие-то преимущества?
cherepets
15-11-2016 15:48
+1
opera.rulez, Ну... Он точно работает во всяком говне типо Opera, UC Browser и т.п.
Много дуг и сплайнов в шрифте могут привести как тормозам.
Но зато с векторными можно пилить крутые анимации без явных косяков.
opera.rulez
23-11-2016 23:04
+1
cherepets, У меня возникло подозрение, что иногда глючат шрифты в формате WOFF. Нафиг Гугл их сейчас подсовывает, если браузеры, поддерживающие WOFF, также поддерживают TTF?
en.wikipedia.org/wiki/Comparison_of_layo...
opera.rulez
24-11-2016 12:39
0
cherepets, Знаешь CDN проекта Google Fonts? Эта штуковина подсовывает разные форматы в зависимости от User-Agent, причём всем браузерам, которые она не знает, подсовывает WOFF.
Пример: fonts.googleapis.com/css?family=Roboto
Двенадцатой Опере подсовывает WOFF, хотя она поддерживает TTF (включая OTF).
Старому Интернет Эксплореру подсовывает WOFF2, хотя WOFF2 поддерживается только Хромом с 36-й версии и Фуррифоксом с 39-й: caniuse.com/#feat=woff2
Идиоты из Гугла наверное думают, что если User-Agent содержит упоминание Интернет Эксплорера, то у пользователя стоит 14-й Edge.
*****
В общем, я понял. Веб-шрифты использовать можно, если хостить шрифты у себя и составлять CSS самостоятельно. Нельзя использовать Google CDN, потому что с ней в половине браузеров будут квадратики вместо символов.
opera.rulez
24-11-2016 12:46
0
cherepets, P.S. Вот тут появятся скриншоты, что кому подсовывает Гугл: browsershots.org/https://fonts.googleapi...
cherepets
24-11-2016 12:55
+1
opera.rulez, Знаю. Но не обязательно же его юзать. По крайней мере я бы не юзал)
Нагрузку по скачиванию шрифтов твой сервак 200% выдержит. Кэширование? Да без разницы, ну не увидит кто-то с телефона твой шрифт на 2 сек дольше...
Edge вроде уже 38. Версии клепают с такой скоростью, что еще при нашей жизни 32битных чисел им станет мало.
opera.rulez
24-11-2016 13:14
0
cherepets, А я даже привёл доказательство, почему его не нужно юзать.
Зачем они занимаются клоакингом, если можно в одном CSS-файле указать сразу несколько форматов? К тому же WOFF и WOFF2 можно смело выкинуть, оставить только TTF/OTF, на всякий случай оставить EOT (вдруг у кого-то старый IE) и на всякий случай оставить SVG (вдруг у кого-то старый Safari).
Кэширование?
Тем более, что можно указать срок хранения кэша 10 лет, тогда каждый браузер будет заново запрашивать шрифт только после очистки кэша.
И вообще Google CDN в любой момент может оказаться вне зоны доступа (как из-за проблем на стороне Гугла, так и из-за проблем на стороне провайдера).
Да без разницы, ну не увидит кто-то с телефона твой шрифт на 2 сек дольше...
Для сайтов типа ХВ, где есть холивары на три тысячи комментариев, действительно без разницы. А для мелких сайтов такая задержка нежелательна. Но на них и при использовании Google CDN возможна задержка, если такой шрифт используется в первый раз, так что для мелких сайтов лучше обходиться встроенными шрифтами.
Edge вроде уже 38.
Перестал следить за выпусками. К тому же далеко не у всех есть Windows 10, а пользователям других систем Edge недоступен.
cherepets
24-11-2016 13:21
+2
opera.rulez, Вроде ж Edge хотят портировать на другие системы (скорее всего ведро, iOS и macOS).
Другой вопрос - будет ли это "честный" порт или перекрашенный хром/сафари чисто для обеспечения кроссплатформенной синхронизации (многие пользователи в целом могли бы юзать Edge на ПК, но они хотят синхронизации со своим чайнафоном => всё равно выбирают хром).
BerkutOi
24-11-2016 13:28
+1
cherepets, я давно перешел на эдж на пк и планшете, ради повышения автономности планшета, но на телефоне приходится страдать без синхронизации
и впринципе мне пофиг что за браузер будет на телефоне, нужна только синхронизация с десктопом
opera.rulez
24-11-2016 13:35
0
BerkutOi, А что именно тебе приходится синхронизировать? Закладки или что-то ещё?
opera.rulez
24-11-2016 13:39
0
cherepets, Прочитал статью. Там написано только про какой-то референдум. Но про то, что Microsoft может что-то портировать, ответ отрицательный.
Вероятно, портировать придётся тем, кто голосовал «за», а не Микрософту.
cherepets
24-11-2016 13:42
0
BerkutOi, И как, реально батарея экономится?
Я им пользуюсь в основном потому что он правильно поддерживает все средства ввода, HDPI, включением Tablet Mode и системными настройками шрифтов.
То есть по сути только в нём правильно поддерживается всё что есть в системе.
cherepets
24-11-2016 13:44
0
opera.rulez, It appears that Microsoft is now at a stage where it is exploring those options. A recent tweet by Fahad Al-Riyami, technology strategist at Microsoft, asks users on Twitter whether they would like to see Microsoft Edge ported to Android and iOS.
Но референдум же как раз Microsoft и устроила.
opera.rulez
24-11-2016 13:53
0
cherepets, В иных местах тоже устраивали референдумы и соцопросы... и в итоге всё равно делали так, как хотели руководители, а не электорат.
Короче, поживём — увидим.
Но на мой взгляд лучше бы они Edge портировали на старые версии Windows. Я видел много людей, которые боятся уходить с Интернет Эксплорера на другие браузеры, потому что IE типа официальный™, лицензионный™, а значит, самый безопасный и самый крутой (о том, как чайники понимают безопасность, мы уже дискутировали). Из-за таких параноиков сайтостроителям приходится поддерживать всякое говно типа IE 8.0.
BerkutOi
24-11-2016 13:57
+1
cherepets, при просмотре видео на ютабе/твиче в сравнении с фаерфоксом - намного, фаерфокс почему-то всё софтверным декодером проигрывает, а через эдж работает аппаратный, в остальном конечно разница незначительная
ну и средства ввода это да, в остальных браузерах клавиатура так и не появляется автоматически
cherepets
24-11-2016 14:02
+1
opera.rulez, Так руководитель же и устроил.
Это просто "имитация демократии". Я думаю, что они уже решили будут ли портировать, а может даже половину работы и сделали.
Теперь просто устроят опрос, чтобы потом сказать "вот, вы просили, а мы сделали".
opera.rulez
24-11-2016 15:08
0
cherepets, Внезапно: если обратиться к Google CDN с User-Agent=Wget/1.17 (или типа того), то Гугл предлагает шрифт в формате TTF.
Решение проблемы с квадратиками на куче сайтов: для домена fonts.googleapis.com подменять User-Agent (в двенадцатой Опере с помощью override.ini, в других браузерах — с помощью расширений).
cherepets
24-11-2016 15:10
+1
opera.rulez, А можно ли подменить заголовок где-то в коде страницы? При запросах из JS же принципиально можно свои заголовки указывать.
opera.rulez
24-11-2016 15:22
0
cherepets, Нашёл ещё одну проблему: по умолчанию Гугл генерирует сокращённую версию шрифта, в которой есть только латиница. Чтобы загрузился полный шрифт, нужно к URL добавить &subset=all. Вот так, например: fonts.googleapis.com/css?family=Roboto&s...
Из-за этой непредусмотрительности на официальной™ странице developers.google.com/ в некоторых браузерах вместо русских букв квадратики.
Вообще нафиг в 2016-м году экономить трафик, распиливая шрифт на подмножества? Ведь сама идея Google CDN была в том, что если для всех сайтов отдавать один и тот же шрифт, то он будет браться из кэша.
Короче, универсальное решение: блокируем домен fonts.googleapis.com, желательно на уровне роутера. Что надо сделать, чтобы Роскомнадзор внёс его в чёрный список?
cherepets
24-11-2016 15:46
+1
opera.rulez, Офигенно: только весь мир начал отходить от ужасов всяких KOI8 и массово использовать UTF, как Google тут же придумал распространять шрифты только с латиницей. Ведь так логично хранить строку в виде с поддержкой кучи языков, но иметь возможность отобразить только один.
Предлагаю сделать иконочный шрифт у которого глифы содержат детскую порнографию, пропаганду суицида и употребления наркотиков.
opera.rulez
24-11-2016 16:09
0
cherepets, Вот так выглядит CSS, возвращаемый Гуглом для браузеров, поддерживающих WOFF2 (естественно, если явно запросить не только латиницу, а и другие подмножества): NSFW.
В WOFF2 можно явно указать, глифы из какого файла шрифта использовать для каких диапазонов символов. В WOFF1 и в других форматах такой возможности нет.
*****
Я уже прилично тут нафлудил, но всё-таки на всякий случай напишу, как возникает проблема с квадратиками при использовании Google CDN:
1. Владельцы сайтов забывают указать параметр &subset=all, поэтому Гугл отдаёт шрифт только с латиницей, как будто на дворе 1997-й год или даже 1987-й и повсюду раскиданы кустарные русификаторы.
2. Для браузеров, отсутствующих в «белом» списке Гугла, Гугл возвращает шрифт в формате WOFF. А в «белый» список попасть трудно, поскольку браузеров сейчас много. Повторю, что непонятно, почему Гугл так делает, ибо в одном CSS можно сразу указать дубликаты в нескольких форматах. Вот так, например.
3. Браузеры отсутствующие в загруженном шрифте глифы подставляют из случайного системного шрифта, но только если загруженный шрифт в формате TTF/OTF. Если загруженный шрифт имеет формат WOFF, то автоматическая подстановка не работает и вместо отсутствующих глифов выходят квадратики.
opera.rulez
24-11-2016 16:16
0
cherepets, Предлагаю сделать иконочный шрифт у которого глифы содержат детскую порнографию, пропаганду суицида и употребления наркотиков.
Я нашёл пропаганду гомосексуализма: 👬 и 👭.
И пропаганду Третьего Рейха (запрещённой в РФ организации): 卐 и ϟϟ.
opera.rulez
24-11-2016 19:49
0
cherepets, А можно ли подменить заголовок где-то в коде страницы? При запросах из JS же принципиально можно свои заголовки указывать.
При запросе на свой же сервер можно. При кроссдоменном запросе печаль. Тебе приходилось когда-нибудь выполнять кроссдоменные запросы из браузера?
Проще один раз сделать запрос прямо со своего сервера к Гуглу с хорошим User-Agent'ом (при указании которого Гугл возвращает шрифты в формате TTF), сохранить этот CSS-файл на своём сервере и отдавать своим посетителям уже закэшированную на своём хостинге версию. CSS-файл же весит мало, вообще не вижу смысла отдавать его с Гугла (разве что если очень хочешь помочь Гуглу следить за своими посетителями).
Обломаются пользователи старых IE (которые поддерживали только EOT), но специально для них можно закэшировать ещё версию CSS для IE и вставить её через «условные комментарии»: <!--[if lt IE 9]> или типа того.
Но на мой взгляд надёжнее всего будет отказаться от Гугла.
cherepets
24-11-2016 22:42
+1
opera.rulez, Ну.. Я знаю что там CORS и нужны какие-то чудо заголовки. Обычно я просто спрашиваю у фронтов что они хотят в заголовках и это и отправляю.
opera.rulez
25-11-2016 04:24
0
cherepets, Смотрим шпаргалку:
learn.java_script.ru/xhr-crossdomain
java_script.ru/ajax/cross-domain-scriptin...
java_script.ru/ajax/cross-origin-2
Чтобы браузер принял ответ на кроссдоменный запрос, нужно, чтобы сервер выдал заголовок Access-Control-Allow-Origin: *. Если Гугл этот заголовок не выдаёт, то ничего не получится. Проверяем... Ура, выдаёт.
А вот в IE<9 совсем ничего не получится: его XDomainRequest не позволяет добавлять свои заголовки.
И обломаются те, кто по каким-то причинам до сих пор использует Opera Mobile, основанную на движке 10-й или 11-й версии (в 12-й версии CORS уже есть). Но обновить OM гораздо проще, чем IE, так что это не проблема.
*****
А теперь представь себе весь процесс: чтобы получить CSS-файл на пару килобайт, браузер выполняет CORS, подменяя User-Agent на фальшивый, а потом этот CSS ещё нужно как-то применить (например, динамически создать элемент <style>). В принципе... рабочий вариант. Если у кого-то не сработает, то просто не применится гугловский стиль и будут дефолтные системные шрифты. Всё же лучше, чем квадратики.
cherepets
25-11-2016 10:55
+1
opera.rulez, Вообще конечно грузить шрифт из скрипта - довольно тупо, потому что он по определению не загрузится пока не начнет работать скрипт (а скрипты сами любят подгружаться когда у тебя часть страницы отрисована).
Так что этот способ можно назвать годным только для хардкорных SPA: когда HTML пустой, а потом у тебя из кода создается вся страничка.
opera.rulez
25-11-2016 13:45
0
cherepets, Ага, будет то, что называют “flash of unstyled text”.
На некоторых новостных сайтах ещё видел, как после загрузки страницы скриптом начинает подгоняться ширина колонок и едет всё оформление. Вообще тупо выглядит.
Рейтинг холивара
0
| Ссылка | |
 |
| Для форума (BB-код) | |
| |
Jotun, Про веб речь по большому счету и не идет. Лицензия запрещает распространять правые шрифты отдельно, а разобраться со всеми возможными системами слишком сложно (кто знает какой иконочный шрифт вшит в арч?)