使用 bootstrap 更改移动网站中的字体

Question

我在 visual studio 2013 中使用 bootstrap3.3.4 创建一个新的 webform 应用程序，我删除了 Site.Mobile.Master 文件，以确保我的应用程序仅使用 Site.Master .我还更新了 site.css 以获得新的网络字体样式。即 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 class:

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

我用电脑浏览器打开页面，一切都很完美。一个普通 header，一个浅色 header

我的问题是，当我在手机上尝试时，无论样式如何，header 的字体都保持不变。好像有专门的地方可以改手机字体。

那么，对于在何处定义要在移动设备上使用的字体有什么想法吗？

Answer 1

不确定您是否注意到了，但是您没有在 HTML 中正确关闭字符串。你写了<h2 class="lightFont>，但那应该是<h2 class="lightFont">。

Answer 2

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

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

 }

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

Answer 3

经过大量的搜索和测试，我发现下面的声明可以解决问题。我没有任何理由或理由说明之前的声明不起作用，但以下声明适用于多个设备。

首先，您的应用程序中必须有字体文件；在我的例子中，我将它们放在一个名为 "fonts".

的文件夹中

@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) 创建的模板中复制 glyphicons 字体的声明。所以我只是盲目地跟随它。

使用 bootstrap 更改移动网站中的字体

change the font in mobile site using bootstrap

css

asp.net

webforms

webfonts

twitter-bootstrap-3