Какие шрифты использовать при разработке страниц HTML с помощью CSS для мобильных телефонов?

Question

Во-первых, я планирую CSS для стилизации страниц (с гибкими макетами), которые ориентированы на мобильные браузеры.

    <style type="text/css"> 
    body {
        background-color: #000;
        color: #fff;
        font: normal 95%/130% "Trebuchet MS", Verdana, Arial, sans-serif;
        margin: 0;
        padding: 20px 0;
    }
    </style>

Какие значения я должен указать в свойстве шрифта? (Простите, но я новичок в CSS, шрифт называется свойством элемента body?) Очевидно, что у мобильных устройств не будет общего шрифта, поэтому я должен просто оставить его пустым?

Answer 1

Мобильные устройства охватывают тысячи устройств. Некоторые устройства поставляются только с фирменными шрифтами (например, BlackBerry), а некоторые устройства имеют ограниченную поддержку шрифтов. Единственный безопасный способ указать шрифты - это использовать общие семейства шрифтов и позволить устройству выбрать наиболее подходящий вариант.

http://www.w3.org/TR/CSS2/fonts.html#generic-font-families

Answer 2

Apple использует Helvetica, поэтому, если вы хотите внешний вид Apple, вы можете указать это в массиве font-family. Однако не все мобильные устройства будут иметь Helvetica, поэтому вы обязательно захотите объявить как минимум sans-serif в конце массива. Вот строка, использующая то, что когда-то было шрифтами без засечек по умолчанию для основных портативных платформ:

body {
    font-family: Helvetica, "Droid Sans", Prelude, BBMillbank, "Microsoft Tahoma", sans-serif;
}

Конечно, если вы просто объявите без засечек, я думаю, вы все равно получите их по умолчанию. (Мне бы очень хотелось иметь возможность проводить тестирование на всех платформах напрямую. Эмуляторы покажут вам только это.)

Answer 3

Просто убедитесь, что вы указали семейство шрифтов по умолчанию (например, sans-serif или monospace), чтобы страница хорошо работала, даже если все указанные шрифты недоступны.

Answer 4

Мобильные устройства должны иметь большинство основных шрифтов, доступных в браузерах. Они по-прежнему отображаются на экране, поэтому важно использовать шрифт без засечек (Verdana, Arial - хороший выбор). Обычно вы помещаете в CSS несколько шрифтов в «порядке предпочтения»