不同设备中的字体更改答案

【问题标题】：Font Change In Different Devices不同设备中的字体更改
【发布时间】：2019-03-06 11:11:06
【问题描述】：

我在我的网页中使用了一种字体。我的计算机中的 chrome、Firefox 和 IE 没有任何问题，但在其他设备中字体会发生变化。有人知道为什么会这样吗？

*{

font-family: Montserrat;
 }

【问题讨论】：

添加您的代码示例
@Malik Adil 完成
听起来您正在尝试使用网络字体，但您没有提供字体文件。 - responsivedesign.is/articles/… - 如果你想使用网络字体，像谷歌字体这样的地方是个好去处 - fonts.google.com

【解决方案1】：

字体已安装在您的系统中，因此不会在您的设备中更改。您需要在代码中添加字体。

例如

@import url('https://fonts.googleapis.com/css?family=Open+Sans');

在 CSS 文件中添加使用您需要的字体更改链接

或者如果你有字体文件，那么在 CSS 中添加字体文件为

@font-face { font-family: roboto-regular; 
             src: url('../font/Roboto-Regular.ttf'); } 
h2{
    font-family: roboto-regular;
}

【讨论】：

【解决方案2】：

您必须在您的 css 文件中定义您的字体。例如：

@font-face {
  font-family: myFirstFont;
  src: url(font-location);
}

* {
  font-family: myFirstFont;
}

【讨论】：

【解决方案3】：

某些浏览器/操作系统/设备可能不支持该字体。定义多种字体。

* {
  font-family: 'Montserrat', sans-serif;
}

另一种解决方案是下载 Google Web Fonts，将它们与您的网站一起上传，然后在 css 文件中手动定义它们。另一种方法可能是使用 JavaScript Web Font Loader 而不是默认的。

【讨论】：

【解决方案4】：

在您的标题中：

<link href="https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap" 
rel="stylesheet">

在您的 CSS 中：

@import url('https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap');
.fontn{
  font-family:'Caesar Dressing', cursive;
}

【讨论】：