@font-face 仅限 Firefox Mac。在文本上填充顶部和底部

发布于 2024-10-26 02:17:41 字数 1983 浏览 0 评论 0原文

我使用 @font-face css 函数来使用自定义字体。除了任何版本的 Firefox Mac 之外,它们在 Windows 和 Mac 上的所有浏览器(即 Chrome、Safari、Opera)中看起来都很棒。

基本上,该字体仅在 Firefox ma​​c 上使用此字体在所有 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文