在Microsoft Edge中使用@ font-face [英] using @font-face in Microsoft Edge

问题描述

我在这里处理一个奇怪的问题。当我使用@ font-face时，似乎Microsoft Edge浏览器不加载字体。我检查了所有运行Windows 10的计算机， Microsoft Edge。

我检查了 http：// caniuse.com/#search=font%20face

它说font-face与Edge兼容，所以我不知道发生了什么。
在我的例子中，我只是有一个div和它的字体参数。
$ b

CSS

$ b字体样式：普通; font-weight：200; src：local（'Dosis ExtraLight'），本地（'Dosis-ExtraLight'），url（http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2）格式（'woff2'）;}
@ font-face {font （Dosis Bold），本地（Dosis-Bold），url（http://fonts.gstatic.com/） s / dosis / v4 / 22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2）format（'woff2'）;}

HTML

  div {
 font-family：'Dosis'; 
 
 
 
 
 $ b 
 直播版  
 
 
  http://codepen.io/mariomez/pen/YwGGWy           为了安装所有必要的格式，我遵循的步骤是找到每种字体所需的字体重量，然后从Google字体下载。然后使用 https://everythingfonts.com/font-face （字体生成器）我下载了所有的格式以及CSS代码。然后我把它们全部整合到我的CSS和HTML中。
 $ b 
  CSS：  
 
 
  @ font-face {
 font-family：'JosefinSansLight'; 
 src：url（'/ fonts / JosefinSansLight.eot'）; 
 src：url（'/ fonts / JosefinSansLight.eot'）格式（'embedded-opentype'），
 url（'/ fonts / JosefinSansLight.woff2'）格式（'woff2'），
 url（'/ fonts / JosefinSansLight.woff'）format（'woff'），
 url（'/ fonts / JosefinSansLight.ttf'）format（'truetype'）; 
 
  
  HTML（摘录）： 
  .testim {
 font-family：'JosefinSansLight'，sans-serif; 
 line-height：normal; 
颜色：＃969696; 
 font-size：1.2em; 
 
  
 文件:(我的域名文件夹）/ fonts  
 字体/ JosefinSansLight.eot 
字体/ JosefinSansLight.eot 
字体/ JosefinSansLight.woff2 
字体/ JosefinSansLight.woff 
字体/ JosefinSansLight.ttf 
  
 
I am dealing with a strange issue here.. It seems that Microsoft Edge browser doesn't load fonts when I use @font-face. I checked all my computers that run Windows 10 & Microsoft Edge.


I checked http://caniuse.com/#search=font%20face

It says that font-face is compatible with Edge so I don't know what's going on.
In my example I just have a div and its font parameter.

CSS
@font-face{font-family:'Dosis';font-style:normal;font-weight:200;src:local('Dosis ExtraLight'), local('Dosis-ExtraLight'), url(http://fonts.gstatic.com/s/dosis/v4/RPKDmaFi75RJkvjWaDDb0vesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
@font-face{font-family:'Dosis';font-style:normal;font-weight:700;src:local('Dosis Bold'), local('Dosis-Bold'), url(http://fonts.gstatic.com/s/dosis/v4/22aDRG5X9l7obljtz7tihvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');}
HTML
div {
  font-family:'Dosis';
}
Live version

http://codepen.io/mariomez/pen/YwGGWy
解决方案
Procedure:

The procedure I followed in order to install all necessary formats was to find which font-weight I needed from each font and then go and download it from Google Fonts. Then using the https://everythingfonts.com/font-face (font face generator) I downloaded all the formats along with the CSS code. Then I incorporated them all into my CSS and HTML.

CSS:
@font-face {
    font-family: 'JosefinSansLight';
    src: url('/fonts/JosefinSansLight.eot');
    src: url('/fonts/JosefinSansLight.eot') format('embedded-opentype'),
         url('/fonts/JosefinSansLight.woff2') format('woff2'),
         url('/fonts/JosefinSansLight.woff') format('woff'),
         url('/fonts/JosefinSansLight.ttf') format('truetype');
}
HTML (excerpt):
.testim{
font-family:'JosefinSansLight', sans-serif;
line-height:normal;
color:#969696;
font-size:1.2em;
}
Files: (my domain folder)/fonts
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.eot
fonts/JosefinSansLight.woff2
fonts/JosefinSansLight.woff
fonts/JosefinSansLight.ttf


                        
这篇关于在Microsoft Edge中使用@ font-face的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！