移动设备与桌面设备上的 Google 字体答案

【问题标题】：Google Fonts on Mobile vs Desktop移动设备与桌面设备上的 Google 字体
【发布时间】：2018-09-11 04:01:25
【问题描述】：

我正在为我的 web 应用程序使用 Merriweather 字体，方法如下所示。

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Merriweather:300i">

这在桌面浏览器上运行良好，但在移动设备上，它会回退到默认字体。如果我将行替换为导入300 而不是300i，一切似乎都正常。

有人知道我怎样才能在台式机上使用300i 字体并在移动设备上回退到300？

【问题讨论】：

您是否尝试过将这两者结合在一个链接中，例如：link 或 link。我不确定会发生什么，但我想值得一试吗？

标签： css media-queries google-fonts

【解决方案1】：

无需查看您可能已实现的任何 CSS，在 Web 和移动设备之间切换前沿的最简单方法是使用媒体查询。

既然要同时使用 300 和 300i，请导入

  <link href="https://fonts.googleapis.com/css?family=Merriweather:300,300i"    rel="stylesheet">

将您的正常默认文本设置为

  font-family: 'Merriweather';
  font-style: italic;
  font-weight: 300;

对于移动设备使用媒体查询：

@media all and (max-width: 991px) or (max-width: 768px) or (max-width: 480px) {
* these are the three popular mobile queries *
}

在媒体查询中你可以设置文本：

  font-family: 'Merriweather';
  font-style: normal;
  font-weight: 300;

【讨论】：

【解决方案2】：

您需要将这两种字体都导入到您的主样式表中。

@font-face {
    font-family: Merriweather:300i;
    src: url(https://fonts.googleapis.com/css?family=Merriweather:300i);
}

@font-face {
    font-family: Merriweather:300;
    src: url(https://fonts.googleapis.com/css?family=Merriweather:300i);
}

（您可能需要将.woff 文件的实际位置放在src: 属性中。）

然后使用specific media queries for mobile and desktop

/* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/

@media (min-width: 1025px) and (max-width: 1280px) {

  * {
      font-family: Merriweather:300i
   }

}

/* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/

@media (min-width: 768px) and (max-width: 1024px) {     

  * {
      font-family: Merriweather:300
   }

}

【讨论】：