使用引导程序更改移动网站中的字体

我在Visual Studio 2013中使用bootstrap3.3.4创建新的webform应用程序，并删除了Site.Mobile.Master文件，以确保我的应用程序正在使用Site.Master只要。我还更新了site.css以具有新的webfont风格。即的Roboto，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>

我打开电脑浏览器上的网页，并一切都很完美。一个正常的标题和一个灯头

我的问题是，当我尝试从我的手机，字体保持相同的两个标题，无论风格。它看起来像是有一个特殊的地方来改变手机的字体。

那么，有什么想法在哪里定义在移动设备上使用的字体？

来源

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; 
}

现在，您可能会问，为什么我重复'eot'扩展的'src'属性。好吧，我只是复制字形的声明字体从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; 
    } 

}

如果屏幕尺寸小于750px，这会使字体变大。

来源

2015-06-02 07:50:07

令人惊叹的部分是尺寸增加，但字体“Raleway”未应用。默认字体仍然存在。这是在移动。但我调整窗口的铬大小不超过750，它会改变字体和大小。 – omarmallat

使用引导程序更改移动网站中的字体

回答

相关问题