Question

我已经在CSS样式表中定义了样式，所有内容在Chrome和Safari中都按预期显示。但是，当我在Internet Explorer中打开项目时，我失去了样式。我试图直接在HTML文档中定义样式，但是仍然无法正常工作。我需要实现一些特定于IE的样式定义吗？或任何其他想法如何解决这个问题？这是我的“ submenu-btn”的CSS：

.submenu-btn {
  padding-left: 25px;
  font-family: avenir;
  width: 100%;
  height: 35px;
  background-color: #f2f2f2;
  border : none;
  border-bottom: solid 0.5px lightgray;
  transition: all ease 0.5s;
  border-radius: 0px;
  bottom: 5px;
  position: static;
  text-align: left;
}

Answer 1

向样式表添加字体的最简单方法之一是使用Google Fonts。通过使用Google字体，无论使用什么浏览器，您都将为所有用户提供相同的体验。

浏览器只能使用本地可用的字体。因此，当您使用仅安装在计算机上的字体时，其他用户将不会看到该字体，除非已安装。使用Google字体，您或其他用户都无需安装字体。

与通过@font-face定义字体（有一些怪异）相比，这使Google字体更不容易出错。例如，并非所有的浏览器都支持所有字体文件扩展名，如here和here所示。但是您还需要为所有规则定义font-weight和font-style。

要使用Google字体，有2个选项。首先是通过HTML。在head标签中添加以下HTML：

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

第二个选项是将其直接导入样式表。在CSS文件中的某处（最好在顶部）添加以下CSS：

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

这样，您就不需要使用HTML导入它。

在两种情况下，您仍需要添加以下行以将字体家族应用于元素：

font-family: 'Nunito', sans-serif;

Nunito字体非常接近问题中提到的Avenir外观。

如何在资源管理器中实现特定的字体样式？

1 个答案: