我在 Mac 上的 Safari 和 Chrome 中使用嵌入字体格式化任何 block 元素时遇到问题。 所有 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>
最佳答案
我通过 font squirrel 工具运行字体解决了这个问题: fontsquirrel.com/tools/webfont-generator
该工具生成所需的不同 Web 格式并修复了我在使用此字体时遇到的行高问题
@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;
}
关于css - @font-face 在 MAC (Chrome/Safari) 上不显示 block 元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22767056/