Question

我在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>

我在电脑浏览器上打开页面，一切都很完美。一个普通标题和一个标题

我的问题是当我从手机上试用它时，无论样式如何，两个标题的字体都保持不变。看起来有一个特殊的地方可以改变手机的字体。

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

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更改移动网站中的字体

3 个答案: