18

An HTML email must (should) have its CSS inlined in order to have the expected design in most of the email clients.

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?

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.

4

2 回答 2

29

如果字体是绝对必要的，您将不得不使用文本作为图像解决方案。截至 12 月，只有 iOS Mail、Mail.app、Lotus Notes 8、Android 上的默认 Mail、Outlook 2000 和 Thunderbird 支持使用外部自定义字体。

请参阅： http: //www.campaignmonitor.com/blog/post/3897/using-web-fonts-in-email

2014 年 2 月 10 日编辑：由于这是我最受欢迎的答案之一，以下是电子邮件中网络字体最佳实践的更新链接：

http://www.campaignmonitor.com/resources/will-it-work/webfonts/

于 2013-07-01T12:56:23.553 回答
4

您现在可以使用 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);

输出：

<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;">

渲染：

于 2016-11-03T07:48:36.753 回答