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

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

改用google字体API ...它会解决你的IE问题。

• Google浏览器:浏览器版本4.249.4+
• Mozilla火狐:浏览器版本: 3.5+
• Apple ：6+版本3.1+
• Opera:版本浏览器：版本6+

你的代码应该是：

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

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

Answer 2

另一种方法是在html的头部添加google字体的链接，然后在样式表中正常调用它。here中的这段代码，然后将这段代码粘贴到html的头部：

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

要在样式表中使用该字体，请确保提供相关的回退：

font-family: 'Lobster', cursive;