Изменить шрифт на мобильном сайте с помощью начальной загрузки

Я использую bootstrap3.3.4 в visual studio 2013 для создания нового приложения веб-формы и удалил файл Site.Mobile.Master, чтобы убедиться, что мое приложение использует только Site.Master. Я также обновил site.css, чтобы иметь новый стиль веб-шрифта. то есть Робото, Raleway...

@import url(http://fonts.googleapis.com/css?family=Roboto:500,300,400);
@import url(http://fonts.googleapis.com/css?family=Raleway:500,400,300);

.lightFont {
    font-family:"Raleway";
    font-weight:300;
}

Допустим, у меня есть 2 тега h2, один из которых имеет класс lightFont:

<h2>Default header</h2> 
<h2 class="lightFont>Light Font header</h2>

Я открываю страницу в браузере компьютера, и все было идеально. один нормальный заголовок и один легкий заголовок

Моя проблема в том, что когда я попробовал его со своего мобильного телефона, шрифт остается одинаковым для обоих заголовков независимо от стиля. Похоже, что есть специальное место для изменения шрифта для мобильных телефонов.

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

Источник

3 ответа

Решение

После многих поисков и тестов я обнаружил, что следующая декларация решит проблему. У меня нет никакого оправдания или причины, по которой предыдущее объявление не сработало, но следующее работает на нескольких устройствах.

Во-первых, у вас должны быть файлы шрифтов в вашем приложении; в моем случае я положил их в папку "шрифты".

@font-face {
    font-family: 'Raleway';
    src: url('../fonts/raleway_thin-webfont.eot');
    src: url('../fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'), 
        url('../fonts/raleway_thin-webfont.woff') format('woff'), 
        url('../fonts/raleway_thin-webfont.ttf') format('truetype'), 
        url('../fonts/raleway_thin-webfont.svg#webfontnF3kUzPR') format('svg');
    font-style: normal;
}

Теперь вы можете спросить, почему я повторяю свойство 'src' для расширения 'eot'. ну, я просто копирую объявление шрифта glyphicons из шаблона, созданного в Visual Studio 2013 (bootstrap.css). так что я просто следую этому вслепую.

Источник

Не уверен, что вы заметили, но неправильно закрыли строку в своем HTML. Вы написали <h2 class="lightFont>, но это должно быть <h2 class="lightFont">,

Источник 
@media screen and (max-width: 750px;){

.lightFont {
   font-family:"Raleway";
   font-weight:300;
   font-size:34px;
  }

 }

Это сделает шрифт больше, если размер экрана ниже 750 пикселей.

Источник
Другие вопросы по тегам