Форум русской поддержки Joomla!® CMS
09.12.2016, 15:40:58 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
   
   Начало   Поиск Joomla 3.0 FAQ Joomla 2.5 FAQ Joomla 1.5 FAQ Правила форума Новости Joomla Реклама Войти Регистрация Помощь  
Страниц: [1] 2  Все   Вниз
  Добавить закладку  |  Печать  
Автор

Универсальный шрифт для ПК и мобильных устройств

 (Прочитано 667 раз)
0 Пользователей и 1 Гость смотрят эту тему.
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« : 24.07.2016, 13:40:34 »

"Универсальный" - это я в смысле чтобы для ПК был один шрифт, а для мобильных автоматически включался другой стиль. И чтобы это видел/понимал Google.
Мне не хотелось бы применять Мобил-Joomla, т.к. нет задачи делать полноценную мобильную поддержку (на моём сайте она и не нужна), но в то же время жутко неприятно смотреть на то, что пишет PageSpeed Insights
Пытался тупо увеличивать шрифт, но сайт становится страшным, а пейджспиду всё мало.
Раньше с этой проблемой мирился, но с переходом с 2.5 на 3.6 пейджспид вообще всю страницу стал браковать...

Можно ли сделать "универсальный шрифт" простым способом, чтобы даже чайник мог сделать?
Может быть как-то использовать в стилях CSS-пиксели? Тогда как?
Или тут простых путей не бывает?
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #1 : 24.07.2016, 13:42:59 »

Я, если честно, нифига не понял. Вы про гарнитуру или кегль? В каком плане «универсальный»?
Записан
Missile
Завсегдатай
*****

Репутация: +70/-0
Offline Offline

Пол: Женский
Сообщений: 683


« Ответ #2 : 24.07.2016, 15:43:44 »

Попробуйте размер шрифта задавать не в пикселях, а в em или в %.
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #3 : 24.07.2016, 16:11:58 »

Я, если честно, нифига не понял. Вы про гарнитуру или кегль? В каком плане «универсальный»?
Чтобы шрифт на сайте нормально воспринимался мобилками и в то же время не выглядел огромным на ПК.

Попробуйте размер шрифта задавать не в пикселях, а в em или в %.
На что-то подобное и рассчитывал,
нельзя ли подробней, желательно с примером? (в идеале - применимом к моему сайту)
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #4 : 24.07.2016, 16:40:06 »

Вообще, так сейчас не принято делать. Размер шрифта должен быть одинаковым на всех девайсах. Но если сильно нужно, то можно сделать на less. Выводите размер шрифта в переменную, например @global-font-size. Далее, все размеры шрифтов выставляете относительно этого. Например h1 {font-size: @global-font-size * 1.2;}. И последнее, важное, оборачиваете @global-font-size в условия медиа-запросов, и, в зависимости от разрешения, присваиваете нужное значение.
Записан
Missile
Завсегдатай
*****

Репутация: +70/-0
Offline Offline

Пол: Женский
Сообщений: 683


« Ответ #5 : 24.07.2016, 17:05:15 »

Цитировать
нельзя ли подробней, желательно с примером?
Размер шрифта указываете не в пикселях (допустим, 14 px), а в em - 1.0 em, 0.9 em, 1.3 em и так далее. Смотрите сайт на разных устройствах и подбирайте оптимальную величину.
Можно вот так ещё сделать:
Код:
html {
  font-size: 16px;
 
  @media (min-width: 600px) {
    font-size: 18px;
  }
 
  @media (min-width: 800px) {
    font-size: 20px;
  }
}

Цитировать
Размер шрифта должен быть одинаковым на всех девайсах.
Размер шрифта должен коррелировать с настройками браузера. Если на экране с разрешением 1280х1024 я могу спокойно читать сайт с жёстко заданным размером шрифта в 14px, то на экране с разрешением 1920х1080 текст этого же сайта выглядит очень мелким.
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #6 : 24.07.2016, 17:13:21 »

Размер шрифта должен быть одинаковым на всех девайсах.
Теперь моя очередь сказать "нифига не понимаю". У меня ж так сделано - так PageSpeed чуть ли не матом ругается.
Интересно, что на 2.5 он ругался только на модуль "Самое читаемое", пункты меню, да на ДВА анонса (НЕ НА ВСЕ) статей в избранном, а сейчас (на 3.6) красит в красный цвет всю главную страницу... Для меня это загадка.

если сильно нужно, то можно сделать на less. Выводите размер шрифта в переменную, например @global-font-size. Далее, все размеры шрифтов выставляете относительно этого. Например h1 {font-size: @global-font-size * 1.2;}. И последнее, важное, оборачиваете @global-font-size в условия медиа-запросов, и, в зависимости от разрешения, присваиваете нужное значение.
Побочные эффекты какие? Влияет ли на скорость и т.п.?
Реально ли чайнику сделать самостоятельно?
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #7 : 24.07.2016, 17:23:29 »

Можно вот так ещё сделать:
Показать текстовый блок
Про em вроде понял, попробую. А этот код не могли бы объяснить?
Я понял так, что надо перечислить варианты ширины девайса, с которого смотрят сайт и присвоить каждой из них свои значения? Но тогда это (полный список) надо будет делать везде, где прописаны шрифты?

Какой из двух ваших вариантов вы считаете лучшим?
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #8 : 24.07.2016, 17:49:40 »

Размер шрифта должен коррелировать с настройками браузера. Если на экране с разрешением 1280х1024 я могу спокойно читать сайт с жёстко заданным размером шрифта в 14px, то на экране с разрешением 1920х1080 текст этого же сайта выглядит очень мелким.

На десткопе масштабируем через Ctrl+(0-9). На мобиле типа щипками. Всё прекрасно масштабируется, в не зависимости от того, в каких единицах указан размер. Плюс, изначально сайт выглядит так, как это задумывали разработчики, а не юзер намудрил. Раньше я и сам пользовался только относительными величинами. А потом мне прострелили колено, после очередного клиента, которого я не смог вразумить, что это не вёрстка кривая, это у него масштаб стоит 900% для шрифтов, я забил на это дело. В любом случае, это древний холивар, в чём измерять шрифты. Я за пиксели, вы за em.

Bright, на скорость не влияет, т.к. работает на стороне пользователя.
Записан
Missile
Завсегдатай
*****

Репутация: +70/-0
Offline Offline

Пол: Женский
Сообщений: 683


« Ответ #9 : 24.07.2016, 19:08:29 »

Цитировать
На десткопе масштабируем через Ctrl+(0-9).
Не все пользователи будут это делать (и не все умеют). Некоторых может сразу отпугнуть нечитаемый шрифт. Но я согласна с Вами, что
Цитировать
это древний холивар, в чём измерять шрифты
Цитировать
Я понял так, что надо перечислить варианты ширины девайса, с которого смотрят сайт и присвоить каждой из них свои значения? Но тогда это (полный список) надо будет делать везде, где прописаны шрифты?
Имхо, двух параметров (600px и 800px) вполне достаточно, чтобы покрыть разрешения низкобюджетных мобильных гаджетов - смартов и планшетов. На смартфоне, по-моему, уже меньше 960х540 не делают, а на планшетах - меньше 800х600.
Прописать нужно один раз в главном CSS шаблона - в начале, после тега body.
Цитировать
Какой из двух ваших вариантов вы считаете лучшим?
Я себе в em определяю, но это - дело вкуса. Если начать копать в этом направлении в приступе перфекционизма, то можно до страшных вещей дойти.
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #10 : 24.07.2016, 21:02:40 »

Но я согласна
Дак вы еще и девушка?! Тогда вам еще одно отдельное публичное спасибо! Azn
Missile, а не могли бы вы дать один-два примера сайтов, где сделано в em и/или с пропиской расширений?

Shustry, при всём уважении...
Что касается холивара про спор шрифтов, то не надо путать. ТОТ холивар был когда мобильных устройств фактически еще не было, а сейчас продажи ПК падают, ноуты, нетбуки, планшеты и мобилы растут. В итоге скоро придется поменять ориентиры - мобильные устройства будут лидировать безусловно и никуда не денешься от того, чтобы это учитывать. Google это понял первым и пытается всем намекнуть, что это... не тот холивар, что был дцать лет назад.
Записан
FitMe
Давно я тут
****

Репутация: +9/-0
Offline Offline

Пол: Мужской
Сообщений: 278



« Ответ #11 : 24.07.2016, 21:15:22 »

em - был через некоторое время уступил rem, для примера "проекта" в котором используется он, посмотрите на обновленный Youtube.com и некоторые свеже-обносленные проекты Вами упомянутого Google.

Так же может интересно будет
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #12 : 24.07.2016, 22:15:03 »

Bright, при всём уважении, я так и не понял, как использование px негативно сказывается на мобильной вёрстке. Особенно мне тяжело это понять в свете овер хофига свёрстанных и успешно сданных проектов с адаптивной вёрсткой. Всё приемущество em и rem в относительности. Измеряем в условных единицах базового шрифта. Безусловно удобно, если верстаешь на голом CSS. Я же верстаю на LESS, где эта величина вынесена в переменную. Здесь нет нужны в rem и em. В UIkit всё построено на пикселях. Это ли не современный фреймворк, адаптированные под все устройства? По-моему скромному мнению, это вообще эталон. Слоупок bootstrap лишь в последней редакции перешёл местами на em. При этом, адаптивную вёрстку на нём делают так же, довольно давно. Возвращаясь в теме: дело вкуса. Кому-то удобнее использовать миксины и переменные LESS/SASS и обходиться без условных едениц, кому-то по-старинке. Я за прогресс.
Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #13 : 24.07.2016, 22:18:11 »


Ту же самую статью хотел скинуть. Smiley. Так конкретно о различиях rem и em. Где, что и как использовать. Мне удобнее в пикселях.
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #14 : 25.07.2016, 01:43:06 »

Ту же самую статью хотел скинуть. Smiley. Так конкретно о различиях rem и em. Где, что и как использовать. Мне удобнее в пикселях.
То ли вы лукавите, то ли кокетничаете, то ли не понимаете... Вам "удобнее в пикселях", НО "на LESS. Разве неясно, что это "что в лоб, что по лбу"? По-любому речь идет об адаптивности, только разными методами! Я до LESS не дорос, до комбинирования  rem+em, пожалуй, тоже.
Значит мне осталось выбрать rem или em.

Разговор получился очень интересным, всем СПАСИБО!
Отдельное спасибо FitMe за ссылку на Хабрахабр (умнющий мужичище написал статью) и за примеры Ютуба с Гуглом, подтверждающие правильность моих раскопок. Azn
А я пошел выбирать и думать стоит ли в это ввязываться. )

Если выберу и решусь, поможете? Wink
« Последнее редактирование: 25.07.2016, 01:47:34 от Bright » Записан
Shustry
Moderator
*****

Репутация: +727/-3
Offline Offline

Пол: Мужской
Сообщений: 6667


Рисую дизайны


« Ответ #15 : 25.07.2016, 04:23:17 »

То ли вы лукавите, то ли кокетничаете, то ли не понимаете... Вам "удобнее в пикселях", НО "на LESS. Разве неясно, что это "что в лоб, что по лбу"? По-любому речь идет об адаптивности, только разными методами! Я до LESS не дорос, до комбинирования  rem+em, пожалуй, тоже.

Много чести. Вы ничего не поняли. Впрочем, всё флуд. Sad
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #16 : 25.07.2016, 14:08:11 »

Дел.
Сорри, поторопился с вопросом и как минимум неправильно его сформулировал. Пошел копать дальше.

Кстати, нашел интересную статью по теме:
Отзывчивость в CSS
« Последнее редактирование: 25.07.2016, 15:07:00 от Bright » Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #17 : 25.07.2016, 17:35:43 »

Прописать нужно один раз в главном CSS шаблона - в начале, после тега body.Я себе в em определяю
Сделал ТАК (синим то, что добавил):
Показать текстовый блок

PageSpeed Insights на это никак не отреагировал - те же замечания и с теми же размерами шрифтов.
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6460



« Ответ #18 : 25.07.2016, 20:11:54 »

Bright, походу вы так и не поняли ничего.

1rem - это базовый размер шрифта, заданный для HTML или боди, если базовый размер не задан - браузер задает его сам! по дефолту это 16px
базовый размер задается либо в пикселях (px) либо в пунктах (pt, гуглите на тему пунктов сами, но в веб это малораспространенная единица, пункты - это из печатной типографики) и не может задаваться в иных единицах

1em - это размер шрифта непосредственного родителя, если у непосредственного родителя конкретный размер не задан - используется значение более старшего непосредственного родителя, и так вверх по дереву вложенности элементов вплоть до конкретного указания значения

в вашем примере вы задали базовый размер в 16px и переопределили его для более больших экранов как 16px*20 и 16px*24, т.е. 320px и 384px соответственно
кстати, ваше переопределение для больших экранов не будет работать: в CSS не допускается вложенность селекторов друг в друга, правильный код:
Код
body,html
{
 padding: 0;
 margin: 0;
 margin-bottom: 10px;
 font-size: 16px;
}
 
@media (min-width: 600px)
{
 body,html
 {
   font-size: 20px;
 }
}
 
@media (min-width: 800px)
{
 body,html
 {
   font-size: 24px;
 }
}
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #19 : 26.07.2016, 13:06:16 »

Bright, походу вы так и не поняли ничего.
ваше переопределение для больших экранов не будет работать: в CSS не допускается вложенность селекторов друг в друга, правильный код:
Походу я не удивлён, до мастера мне далеко и я просто скопировал код мастера покруче меня, а из других мастеров только вы написали, что код некорректный.
А так вообще спасибо - после вашего ответа в голове стало светлей )
Но на ваш код сайт тоже не отреагировал. Т.е. ВООБЩЕ никак.
Полностью почистил кэш (в т.ч. устаревший) - тоже не помогло.

Показать текстовый блок
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6460



« Ответ #20 : 26.07.2016, 14:37:00 »

Показать текстовый блок
Спасибо, но я не ориентировался на такие древности, обновляйтесь до последних версий - и будет вам счастье

Но на ваш код сайт тоже не отреагировал. Т.е. ВООБЩЕ никак.
Полностью почистил кэш (в т.ч. устаревший) - тоже не помогло.
Урл на сайт, по другому помочь не получится
« Последнее редактирование: 26.07.2016, 14:40:35 от AlekVolsk » Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #21 : 26.07.2016, 14:51:08 »

Спасибо, но я не ориентировался на такие древности
Версия не последняя, но и не древность. Она вышла, уже после того, как Опера отказалась от своего движка.
Не более года назад!


Урл на сайт, по другому помочь не получится
Урл на сайт
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6460



« Ответ #22 : 26.07.2016, 15:23:49 »

Версия Opera уже 29 )) 12я ветка прекратила свое существование еще в 2012 ))
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6460



« Ответ #23 : 26.07.2016, 15:26:08 »

http://prntscr.com/bxoce5 уверены, что правильно задаете селектор? а если закомментировать 41 строку?
Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6460



« Ответ #24 : 26.07.2016, 15:30:52 »

свыше 800px http://prntscr.com/bxodkr

свыше 600px http://prntscr.com/bxoe9e

менее 600px http://prntscr.com/bxoeki

учитесь пользоваться инспектором кода браузера, волшебная комбинация клавиш: Ctrl+Shift+I
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #25 : 26.07.2016, 15:53:13 »

Версия Opera уже 29 )) 12я ветка прекратила свое существование еще в 2012 ))
Вы правы, но не совсем. Повторюсь, 12.18 вышла порядка года назад.
И, поверьте, я это знаю не хуже, чем вы знаете CSS Azn

учитесь пользоваться инспектором кода браузера, волшебная комбинация клавиш: Ctrl+Shift+I
Давно знаю комбинацию и учусь пользоваться. Пока получается как у обезьяны с гранатой. Вы уж извините...
Я и так много чего выучил после 50-ти... Как-то не получается чтобы всё и сразу выучить хорошо.

Пошел разбираться с вашими картинками. Спасибо!
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #26 : 29.07.2016, 21:53:08 »

учитесь пользоваться инспектором кода браузера, волшебная комбинация клавиш: Ctrl+Shift+I
Вставил ваш код и пришлось полностью уйти в доводку сайта после миграции 2.5-3.6 (было очень много проблем). Сегодня вернулся к вопросу "универсальности". Замучал вашу волшебную комбинацию - и комментил стили, и смотрел на изменения, в т.ч. при переключениях и... далеко не всё понял. Того, что понял, маловато будет. Azn
В частности, долго искал justify - даже поиск не помог. Потом сообразил, что вы возможно дописали style="text-align:justify;"
Ну и я дописал. Вроде тоже разница какая-то есть.
Но сохранять изменения на таком уровне понимания не стал. Тем более, что 16 и 24 включались, а 20px смог полюбоваться только в зачеркнутом состоянии.

Не могли бы вы дать окончательный рецепт - где/что поменять и где/что добавить?
Можно с пояснениями, а можно и без - не хочу вас сильно напрягать.
« Последнее редактирование: 29.07.2016, 21:57:43 от Bright » Записан
AlekVolsk
Профи
********

Репутация: +317/-3
Online Online

Пол: Мужской
Сообщений: 6460



« Ответ #27 : 29.07.2016, 22:19:13 »

поиграйтесь с последовательностью вывода @media - это важно
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #28 : 30.07.2016, 10:51:02 »

поиграйтесь с последовательностью вывода @media - это важно
Я только и делаю, что играюсь методом ненаучного тыка.
Гуглю, читаю, спрашиваю и... опять играюсь. Если честно, уже наигрался.
Записан
Bright
Осваиваюсь на форуме
***

Репутация: +2/-2
Offline Offline

Пол: Мужской
Сообщений: 185


« Ответ #29 : 05.08.2016, 16:07:32 »

поиграйтесь с последовательностью вывода @media - это важно
AlekVolsk, ну так что - не поможете?
Записан
Страниц: [1] 2  Все   Вверх
  Добавить закладку  |  Печать  
 
Перейти в:  

Powered by SMF 1.1.21 | SMF © 2006, Simple Machines

Joomlaforum.ru is not affiliated with or endorsed by the Joomla! Project or Open Source Matters.
The Joomla! name and logo is used under a limited license granted by Open Source Matters
the trademark holder in the United States and other countries.

LiveInternet