изменить шрифт на мобильном сайте с помощью bootstrap

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

@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>

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

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

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

источник

2015-06-02 omarmallat

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

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

@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). , поэтому я просто слежу за ним.

источник

2015-06-03 04:24:25 omarmallat

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

источник

2015-06-02 07:49:10 Pharetra

Это была ошибка типографии при написании этого вопроса. это правильно в приложении. это не имеет никакого отношения к моему вопросу, поскольку моя проблема заключается в том, почему мобильный не применяет эти стили во время работы компьютера. – omarmallat

@media screen and (max-width: 750px;){ 

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

}

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

источник

2015-06-02 07:50:07

удивительной частью является то, что размер увеличивается, но шрифт «Raleway» не применялся. шрифт по умолчанию остается. это было на мобильных устройствах. но я изменяю размер хром на окнах, чтобы быть меньше 750, он меняет шрифт и размер. – omarmallat

изменить шрифт на мобильном сайте с помощью bootstrap

ответ

Смежные вопросы