Как использовать другое семейство шрифтов для мобильных пользователей?

Question

Как использовать другое семейство шрифтов для мобильных пользователей?

-1

У меня есть мобильный отзывчивый сайт, основанный на Twitter Bootstrap, который имеет разные font-family для разных элементов, например

.body {
    font-family: Comic Sans;
}
.header {
    font-family: Arial;
}
.main {
    font-family: Helvetica;
}
.footer {
    font-family: sans-serif;
}
#someOtherElement {
    font-family: Times New Roman;
}

Каким будет правильный способ переопределить шрифт каждого элемента на веб-сайте с общим семейством шрифтов, скажем, Open Sans но только для мобильных устройств?

NB Я изначально думал об использовании Media Queries но ширина новых телефонов и планшетов была такой же высокой или даже выше, чем у ПК-мониторов, поэтому использование медиа-запросов не сработало.

Кроме того, я открыт для решений, требующих JavaScript но предпочел бы использовать метод CSS для достижения этой отзывчивости шрифта.

AndrewL 06 дек. 2016, в 23:38

Источник

0

Зачем тебе это делать? Специфика здесь имеет значение. Медиа-запросы будут прекрасно работать, если вы используете правильные измерения, но не зная, почему вы хотите это сделать, кто знает, решит ли это то, что вы хотите. Похоже, вы предоставляете разные шрифты из соображений совместимости, и в этом случае у вас просто должны быть запасные шрифты.
Brad 06 дек. 2016, в 21:40
0

Ну, клиент, которому принадлежит сайт, хочет этого, по-видимому. Я попытался убедить его просто добавить глобальный общий шрифт для всего сайта как на ПК, так и на мобильном устройстве, что было бы хорошей идеей с точки зрения UI / UX, а также простым в реализации, так как я мог бы просто использовать тег !important в html элемент но да
AndrewL64 06 дек. 2016, в 21:43
0

Медиа-запросы не обязательно должны основываться только на ширине экрана (например, @media handheld { ... } но у Брэда есть очень хороший момент.
DavidG 06 дек. 2016, в 21:43
0

«Примечание: я изначально думал об использовании Media Queries, но размеры экрана новых телефонов и планшетов такие же высокие или даже выше, чем у мониторов ПК, поэтому использование медиазапросов не сработало». Мобильные устройства с разрешением сетчатки не сообщают о медиа-запросах фактическое разрешение экрана - вы можете поиграть с панелью инструментов устройства в Chrome Dev Tools, чтобы увидеть. Пример: iPhone 6 Plus имеет 414 пикселей в ширину при портретной съемке, а не 1080 пикселей.
Jon Uleis 06 дек. 2016, в 21:44
0

@DavidG @media handheld больше не используется - он может даже предшествовать смартфонам.
Jon Uleis 06 дек. 2016, в 21:45
0

@Jon Итак, я думаю, что max-width: 768 м-запрос будет лучшим подходом для этого?
AndrewL64 06 дек. 2016, в 21:46
0

@AndrewLyndem Это работает, хотя оно не предназначается для планшетов в альбомной ориентации (1024 пикселей).
Jon Uleis 06 дек. 2016, в 21:47
0

@JonUleis Хорошо, давненько я не делал MQ, не основанный на ширине
DavidG 06 дек. 2016, в 21:47
0

@JonUleis Это проблема, о которой я говорил в отношении MQ. 1024px будет ориентироваться и на старые мониторы, которые все еще используют многие люди.
AndrewL64 06 дек. 2016, в 21:52
0

@AndrewLyndem Я бы попросил не согласиться со «множеством людей» - проверяйте статистику разрешения рабочего стола в Google Analytics для ваших сайтов, когда у вас есть шанс, и вы, вероятно, не увидите более маленького процента шириной менее 1280 пикселей.
Jon Uleis 06 дек. 2016, в 21:54
0

Тем не менее - это не идеальное решение, поскольку вы можете изменить размер окна браузера и увидеть, как происходит смещение шрифта. Вероятно, вам лучше всего обнаружить мобильные устройства под нагрузкой с помощью JS, добавить класс CSS в тег body и изменить его с помощью шрифтов.
Jon Uleis 06 дек. 2016, в 21:55
0

Я сомневаюсь, что многие посетители изменят размер своего браузера на сайте. Я думаю, что я буду придерживаться 1024px MQ.
AndrewL64 06 дек. 2016, в 21:57
0

@all Спасибо за полезные советы, господа. ура
AndrewL64 06 дек. 2016, в 21:58
0

@AndrewLyndem Вы никогда не отвечали на вопрос, почему вы хотите это сделать. Не имеет значения, что ваш клиент хочет этого ... почему он этого хочет? Это имеет значение ... что такое мобильное устройство? Кто знает. Пиксели здесь бесполезны ... вы можете использовать такие измерения, как em в своих медиазапросах, где 1em выглядит практически на любом устройстве ... но опять же, не имея представления о том, почему вы пытаетесь делать то, что пытаетесь сделать кто знает что тебе сказать. Этот вопрос нельзя ответить, не зная, чего вы на самом деле пытаетесь достичь.
Brad 06 дек. 2016, в 22:21
0

@Brad Скорее всего, потому что он думает, что слишком много разных шрифтов на телефоне не будут выглядеть хорошо.
AndrewL64 08 дек. 2016, в 06:33
0

@AndrewLyndem Слишком много шрифтов ни на что не будут смотреться хорошо.
Brad 08 дек. 2016, в 16:49
0

@Brad Точно ....
AndrewL64 08 дек. 2016, в 19:29
0

@AndrewLyndem Простое решение, а затем ... сократить использование шрифтов по всем направлениям.
Brad 08 дек. 2016, в 19:32
0

@Brad Если бы это был я, я делал снимки с дизайном, это было бы сделано с первого дня, сэр.
AndrewL64 09 дек. 2016, в 16:07

Показать ещё 17 комментариев

Теги:

twitter-bootstrap

html

css

responsive

fonts

1 ответ

Ещё вопросы

Зачем тебе это делать? Специфика здесь имеет значение. Медиа-запросы будут прекрасно работать, если вы используете правильные измерения, но не зная, почему вы хотите это сделать, кто знает, решит ли это то, что вы хотите. Похоже, вы предоставляете разные шрифты из соображений совместимости, и в этом случае у вас просто должны быть запасные шрифты.
Ну, клиент, которому принадлежит сайт, хочет этого, по-видимому. Я попытался убедить его просто добавить глобальный общий шрифт для всего сайта как на ПК, так и на мобильном устройстве, что было бы хорошей идеей с точки зрения UI / UX, а также простым в реализации, так как я мог бы просто использовать тег !important в html элемент но да
Медиа-запросы не обязательно должны основываться только на ширине экрана (например, @media handheld { ... } но у Брэда есть очень хороший момент.
«Примечание: я изначально думал об использовании Media Queries, но размеры экрана новых телефонов и планшетов такие же высокие или даже выше, чем у мониторов ПК, поэтому использование медиазапросов не сработало». Мобильные устройства с разрешением сетчатки не сообщают о медиа-запросах фактическое разрешение экрана - вы можете поиграть с панелью инструментов устройства в Chrome Dev Tools, чтобы увидеть. Пример: iPhone 6 Plus имеет 414 пикселей в ширину при портретной съемке, а не 1080 пикселей.
@DavidG @media handheld больше не используется - он может даже предшествовать смартфонам.
@Jon Итак, я думаю, что max-width: 768 м-запрос будет лучшим подходом для этого?
@AndrewLyndem Это работает, хотя оно не предназначается для планшетов в альбомной ориентации (1024 пикселей).
@JonUleis Хорошо, давненько я не делал MQ, не основанный на ширине
@JonUleis Это проблема, о которой я говорил в отношении MQ. 1024px будет ориентироваться и на старые мониторы, которые все еще используют многие люди.
@AndrewLyndem Я бы попросил не согласиться со «множеством людей» - проверяйте статистику разрешения рабочего стола в Google Analytics для ваших сайтов, когда у вас есть шанс, и вы, вероятно, не увидите более маленького процента шириной менее 1280 пикселей.
Тем не менее - это не идеальное решение, поскольку вы можете изменить размер окна браузера и увидеть, как происходит смещение шрифта. Вероятно, вам лучше всего обнаружить мобильные устройства под нагрузкой с помощью JS, добавить класс CSS в тег body и изменить его с помощью шрифтов.
Я сомневаюсь, что многие посетители изменят размер своего браузера на сайте. Я думаю, что я буду придерживаться 1024px MQ.
@all Спасибо за полезные советы, господа. ура
@AndrewLyndem Вы никогда не отвечали на вопрос, почему вы хотите это сделать. Не имеет значения, что ваш клиент хочет этого ... почему он этого хочет? Это имеет значение ... что такое мобильное устройство? Кто знает. Пиксели здесь бесполезны ... вы можете использовать такие измерения, как em в своих медиазапросах, где 1em выглядит практически на любом устройстве ... но опять же, не имея представления о том, почему вы пытаетесь делать то, что пытаетесь сделать кто знает что тебе сказать. Этот вопрос нельзя ответить, не зная, чего вы на самом деле пытаетесь достичь.
@Brad Скорее всего, потому что он думает, что слишком много разных шрифтов на телефоне не будут выглядеть хорошо.
@AndrewLyndem Слишком много шрифтов ни на что не будут смотреться хорошо.
@AndrewLyndem Простое решение, а затем ... сократить использование шрифтов по всем направлениям.
@Brad Если бы это был я, я делал снимки с дизайном, это было бы сделано с первого дня, сэр.

Marko Manojlovic · Accepted Answer · 2016-12-07T00-43-00.000Z

К сожалению, с большими фрагментами устройств для Android, решения только для медиа-запросов близки к невозможным. Несколько трюков вы можете попробовать здесь, но в конечном счете, JS - это ваша самая безопасная ставка.

Вы можете попробовать создать сложную систему Media Query, описанную более подробно в Css Tricks, но это просто добавит сложности кода. Если вы используете SCSS, который может быть написан немного чище для ваших потребностей в исходном коде, но в конце вывод будет таким же.
Модернизатор! имеют функцию для обнаружения событий касания, которые будут держать ваш css более чистым, но ноутбуки с сенсорным экраном используются все больше и больше с каждым днем, и это может создать некоторые ошибки в будущем на этих устройствах.
И безопасная ставка немного JS, которая добавляет, например, mobile класс к тегу вашего тела, чтобы вы могли контролировать свой css с ним с меньшим количеством строк кода:

// Check for userAgent 
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
  // set the body class
  document.getElementsByTagName('body')[0].className+='mobile'
}

.body {
    font-family: Comic Sans;
}
.header {
    font-family: Arial;
}
.main {
    font-family: Helvetica;
}
.footer {
    font-family: sans-serif;
}

#someOtherElement {
    font-family: Times New Roman;
}

.mobile .body,
.mobile .header,
.mobile .main, 
.mobile .footer, 
.mobile #someOtherElement {
  font-family: 'Open Sans', sans-serif;
}

Вы можете найти более обширную проверку регулярного выражения JS/jQuery на detectmobilebrowsers.com

Надеюсь, поможет