Question

我想使用自定义字体龙虾。我已下载lobster.woff2文件并将其放在字体文件夹中。在我的自定义CSS中，我添加为

 @font-face {
  font-family: 'Lobster';
  font-style: normal;
  font-weight: 400;
  src: local('Lobster'), local('Lobster-Regular'),
  url(./fonts/lobster.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; 
}

.wishes,{
    color: #ff6315;
    font-size: 24px;
    font-weight: bold;
    font-family: 'Lobster', cursive !important;
 }

这适用于chrome和firefox，但不适用于IE

Answer 1

使用谷歌字体API代替......它将修复您的IE问题。

Google Chrome：版本4.249.4 +
Mozilla Firefox：版本：3.5 +
Apple Safari：版本3.1 +
Opera：版本10.5 +
Microsoft Internet Explorer：版本6 +

您的代码应为：

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

.wishes {
  font-family: 'Lobster', cursive;
}

Answer 2

另一种方法是在html的头部添加谷歌字体的链接，然后照常在样式表中调用它。此代码来自here，您可以将此代码段粘贴到html的头部：

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

要使用样式表中的字体执行此操作，请确保提供相关的后备：

font-family: 'Lobster', cursive;

自定义字体龙虾在IE中不起作用

2 个答案: