@font-face 仅限 Firefox Mac。在文本上填充顶部和底部
我使用 @font-face css 函数来使用自定义字体。除了任何版本的 Firefox Mac 之外,它们在 Windows 和 Mac 上的所有浏览器(即 Chrome、Safari、Opera)中看起来都很棒。
基本上,该字体仅在 Firefox mac 上使用此字体在所有 h1 h2 和 p 标签上的字体上方和下方添加填充。然而,当在 windows 机器上使用相同版本的 Firefox 时,字体呈现完全正常,无需任何额外的填充。
在 Mac 和 PC 上的所有其他浏览器上,字体呈现完全正常,无需额外的填充。它只在 firefox mac 上运行!
这是我一直在使用的 @font-face css 代码,由 font-squirrel 使用推荐的设置生成。
@font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont-webfont.eot');
src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont-webfont.woff') format('woff'),
url('telegrafico-webfont-webfont.ttf') format('truetype'),
url('telegrafico-webfont-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont-webfont.eot');
src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont-webfont.woff') format('woff'),
url('telegrafico-webfont-webfont.ttf') format('truetype'),
url('telegrafico-webfont-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont.eot');
src: url('telegrafico-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont.woff') format('woff'),
url('telegrafico-webfont.ttf') format('truetype'),
url('telegrafico-webfont.svg#webfontRUJiw7XW') format('svg');
font-weight: normal;
font-style: normal;
}
这是我应用于 h1 h2 标签的 css 示例
#logo h1 {
font-family:'TelegraficoRegular';
font-size:60px;
margin:0;
padding:0;
}
即使声明 margin:0 和 padding:0 它仍然会在顶部和底部添加填充或其他内容,但仅在 firefox mac 中。
它非常令人困惑,因为它在一个平台上的一个浏览器上。如果是字体文件的问题,您会期望看到该问题在其他浏览器中复制。
我真的很感激任何帮助。谢谢你,
杰克
iam using @font-face css function to use custom fonts. They look great in all browsers (ie,chrome,safari, opera) on windows and mac apart from any version of firefox mac.
Basically, the font is adding padding above and below the font on all h1 h2 and p tags using this font on firefox mac only. however when using the same version of firefox on a windows machine, the font renders completely fine without any extra padding.
On all other browsers on mac and pc, the font renders completely fine without this extra padding. Its just on firefox mac!
Here is the @font-face css code ive been using, generated by font-squirrel using the recommended settings.
@font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont-webfont.eot');
src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont-webfont.woff') format('woff'),
url('telegrafico-webfont-webfont.ttf') format('truetype'),
url('telegrafico-webfont-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont-webfont.eot');
src: url('telegrafico-webfont-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont-webfont.woff') format('woff'),
url('telegrafico-webfont-webfont.ttf') format('truetype'),
url('telegrafico-webfont-webfont.svg#') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'TelegraficoRegular';
src: url('telegrafico-webfont.eot');
src: url('telegrafico-webfont.eot?iefix') format('eot'),
url('telegrafico-webfont.woff') format('woff'),
url('telegrafico-webfont.ttf') format('truetype'),
url('telegrafico-webfont.svg#webfontRUJiw7XW') format('svg');
font-weight: normal;
font-style: normal;
}
this is an example of the css i've been applying to the h1 h2 tags
#logo h1 {
font-family:'TelegraficoRegular';
font-size:60px;
margin:0;
padding:0;
}
Even with stating margin:0 and padding:0 it still adds padding or something on top and bottom but just in firefox mac.
its very baffling since its on one browser on one platform.When if it was the problem of the font file you would expect to see the problem replicated in other browsers.
I would really appreciate any help. Thank-you
Jack
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论