Question

我在使用Safari中的嵌入字体和Mac上的Chrome格式化任何块元素时遇到问题。所有Windows浏览器（IE，Firefox，Chrome甚至Safari）的格式都是正确的，并且字体正确显示内联元素。我已经将html剥离到以下基础并仍然有这个问题 - 我错过了什么？

@font-face { font-family: yowieFont; src: url(/template/GROBOLD.ttf); font-weight:normal; font-style:normal; font-variant:normal;}
h1 { font-family: yowieFont; color: #ed2249;}
h2 { font-family: yowieFont; color: #ed2249;}
h3 { font-family: yowieFont; color: #ed2249;}
p { font-family: yowieFont; color: #ed2249;}
span { font-family: yowieFont; color: #ed2249;}

<h1 style="display: inline;">1: CONTACT US</h1>
<h1 >1: CONTACT US</h1>
<h2 >2: CONTACT US</h2>
<h3 >3: CONTACT US</h3>
<p >P: CONTACT US</p>
<span>span: CONTACT US</span>

Answer 1

我通过字体squirrel工具运行字体解决了这个问题： fontsquirrel.com/tools/webfont-generator

该工具生成了所需的不同网页格式，并修复了我使用此字体时遇到的行高问题

@font-face {
  font-family: 'yowieFont';
  src: url('/template/grobold-webfont.eot');
  src: url('/template/grobold-webfont.eot?#iefix') format('embedded-opentype'),
  url('/template/grobold-webfont.woff') format('woff'),
  url('/template/grobold-webfont.ttf') format('truetype'),    
  url('/template/grobold-webfont.svg#groboldmedium') format('svg');
  font-weight: normal;
  font-style: normal;
}

MAC上的块项目不显示@ font-face（Chrome / Safari）

1 个答案: