时间戳

首页 > 解决方案 > CSS 字体在 Mozilla Firefox、Microsoft Edge 和 Opera 上不起作用

html - CSS 字体在 Mozilla Firefox、Microsoft Edge 和 Opera 上不起作用

问题描述

我正在为网站使用“DinRoundWeb”和“DINRoundComp”字体系列。CSS 样式表中的声明完成如下：

 @font-face {
 font-family: Din;
 src: url("fonts/DINRoundWeb.eot"), url("fonts/DINRoundWeb.woff")              format("woff"), url("fonts/DINRoundComp.ttf") format("truetype");
 font-weight: 400;
 }
 @font-face {
 font-family: Din;
 src: url("fonts/DINRoundWeb-Medium.eot"), url("fonts/DINRoundWeb-  Medium.woff") format("woff"), url("fonts/DINRoundComp-Medium.ttf")    format("truetype");
 font-weight: 600;

}

字体文件位于字体文件夹中。车身样式如下：

   body{
   font-family: Din ,sans;
   color: #444;
   line-height: 1.5rem;
   font-size: 1rem;
   background-color: #f3f3f3;
   }

该样式未应用在页面中，而且不仅出现在 Web Developer Tools-> Fonts-> All Fonts 下。

我将不胜感激任何迹象！我的风格

标签： htmlcssfontsfont-face

解决方案

从您的 css 文件的角度尝试相对路径。每个重量都需要一个额外font-family的重量，如下所示：

@font-face {
  font-family: 'DNRM';
  src: url('../fonts/DINRoundWeb-Medium.eot');
  src: url('../fonts/DINRoundWeb-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/DINRoundWeb-Medium.woff') format('woff');
}

@font-face {
  font-family: 'DNRR';
  src: url('../fonts/DINRoundWeb.eot');
  src: url('../fonts/DINRoundWeb.eot?#iefix') format('embedded-opentype'), url('../fonts/DINRoundWeb.woff') format('woff');
}

推荐阅读