CSS 有没有办法在 HTML 电子邮件中使用 Google Web 字体?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/17383401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is there a way to use Google Web Fonts in an HTML email?
提问by Gabriel Petrovay
An HTML email must (should) have its CSS inlined in order to have the expected design in most of the email clients.
HTML 电子邮件必须(应该)内联其 CSS,以便在大多数电子邮件客户端中具有预期的设计。
Is there a way to link a Google Web Font to or embed in such an email but still maintain a broad acceptance (appropriate rendering) among email clients?
有没有办法将 Google Web 字体链接到或嵌入到这样的电子邮件中,但仍然在电子邮件客户端中保持广泛接受(适当呈现)?
I know that an alternative would be to have an image with the corresponding typography, but I would first search for something else that might work.
我知道另一种方法是使用具有相应排版的图像,但我会首先搜索其他可能有用的东西。
回答by samanthasquared
If the font is absolutely necessary, you will have to go with the text as image solution. As of December, only iOS Mail, Mail.app, Lotus Notes 8, default Mail on Android, Outlook 2000, and Thunderbird support the use of an external custom font.
如果字体是绝对必要的,您将不得不使用文本作为图像解决方案。截至 12 月,只有 iOS 邮件、Mail.app、Lotus Notes 8、Android 上的默认邮件、Outlook 2000 和 Thunderbird 支持使用外部自定义字体。
See: http://www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email
请参阅:http: //www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email
Edit 2/10/2014: Since this is one of my most popular answers, here is the updated link on best practice of web fonts in emails:
2014 年 2 月 10 日编辑:由于这是我最受欢迎的答案之一,这里是电子邮件中网络字体最佳实践的更新链接:
http://www.campaignmonitor.com/resources/will-it-work/webfonts/
http://www.campaignmonitor.com/resources/will-it-work/webfonts/
回答by niftylettuce
You can now use the NPM package custom-fonts-in-emails
to embed custom fonts as images in your emails. https://github.com/crocodilejs/custom-fonts-in-emails
您现在可以使用 NPM 包custom-fonts-in-emails
在电子邮件中嵌入自定义字体作为图像。https://github.com/crocodilejs/custom-fonts-in-emails
import customFonts from 'custom-fonts-in-emails';
import path from 'path';
const options = {
text: 'Make something people want',
fontNameOrPath: 'GoudyBookletter1911',
fontColor: 'white',
backgroundColor: '#ff6600',
fontSize: 40
};
customFonts.png2x(options)
.then(console.log)
.catch(console.error);
Outputs:
输出:
<img width="461" height="51" src="data:image/png;base64,..." title="Make something people want" alt="Make something people want" style="color: white;font-size: 25.5px;line-height: 51px;text-align: center;background-color: #ff6600;">
Renders:
渲染: