让@ font-face在html电子邮件中工作 [英] Getting @font-face to work in html email
问题描述
我正在使用@ font-face来显示我购买的字体并正在自我托管.它在Apple设备上可以正常工作，但是在某些版本的Outlook和Android中，我的文本不会显示在-文本内容应该在的空白处.
I'm using @font-face to display a typeface I have bought and am self-hosting. It works fine on Apple devices, but in some versions of Outlook and Android my text is not displayed at - just a big blank space where the text content should be.
这是我的代码:
<head>
<style type="text/css">
@media screen {
@font-face {
font-family: 'ElenaWebBasic';
src: url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.eot');
src: url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.eot?#iefix') format('embedded-opentype'),
url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.woff2') format('woff2'),
url('https://www.xyz.co.uk/webfonts/ElenaWebBasicBold/ElenaWebBasicBold.woff') format('woff');
font-weight:700;
font-style:normal;
}
h1 {
font-family:'ElenaWebBasic',Georgia,serif !important;
font-weight:700 !important;
}
}
</style>
</head>
然后在内部，在<body>的最顶部，有以下内容:
Then inside, at the very top of the <body> I have the following:
<!--[if mso]>
<style type="text/css">
h1 {font-family: Georgia,serif !important; font-weight:400 !important;}
</style>
<![endif]-->
我假设Outlook将默认使用格鲁吉亚(serif)字体，但根本不显示文本.
I was assuming that Outlook would default to Georgia,serif fonts, but it simply doesn't display the text at all.
推荐答案
这可能是不可见文本(FOIT)的内容，但在某些情况下，它比 Flash 长得多.
This could be a Flash of Invisible Text (FOIT), but in some cases it's much longer than a Flash.
Web浏览器和电子邮件客户端都需要先显示Web字体，然后才能显示它(可能很明显).根据浏览器/客户端和Web字体技术的不同，有时会先显示后备字体，有时什么都不会显示 ...直到下载了Webfont.
Both web browsers and email clients need to download a web font before displaying it (perhaps obvious). Depending on the browser/client and web font technique, sometimes a fallback font will initially display, and sometimes nothing will initially display... until the webfont is downloaded.
如果文本应该有空格，则电子邮件客户端可能会检测到html文本，但无法(尚未)呈现字体.字体下载时间可能很长，或者根本无法下载.如果您使用的是Litmus之类的预览服务，则可以在下载和显示字体之前创建Litmus屏幕截图. (即使效果很好，Litmus中的图像始终会在预览中发生.)
If there are blank spaces where text should be, email clients can likely detect the html text but can't (yet) render the font. Perhaps the font took a long time to download, or couldn't be downloaded at all. If you're using a preview service like Litmus, the Litmus screenshots could be created before the font is downloaded and displayed. (This happens with images in Litmus previews all the time even though they work perfectly fine.)
侧面说明:
不知道在<body>中放置<style>标记是否会退出Outlook，但是在Outlook中将其移到<head>中是绝对安全的:
Side Note:
Not sure if putting a <style> tag in the <body> throws off Outlook, but moving this into the <head> is perfectly safe in Outlook:
<!--[if mso]>
<style type="text/css">
h1 {font-family: Georgia,serif !important; font-weight:400 !important;}
</style>
<![endif]-->
这篇关于让@ font-face在html电子邮件中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
