日本电子邮件网络字体

Question

我一直在研究一个包含日语字符的电子邮件模板，并为此问题烦恼了好几天。

问题是，我想要的电子邮件模板字体渲染输出没有实现。我正在尝试使用 Noto Sans JP 字体，因为它在 Google 字体上是免费的，但电子邮件提供商（在 Gmail 和 Yahoo 上测试）中的输出是不同的。

所以，如果我坚持使用 Noto Sans JP 字体，或者我必须放弃使用它的想法并尝试其他字体，有什么解决方法吗？是否有适用于电子邮件的日文网络字体？

我正在此处测试我的 html-电子邮件有效性：https://www.htmlemailcheck.com/check/。在此处发送电子邮件测试：https://putsmail.com/tests/new

请同时检查我下面的代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>ジャパン</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <meta http-equiv="Content-Type" content="text/html charset=UTF-8" />
        <link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP:100,300,400,500,700,900&display=swap&subset=japanese" rel="stylesheet">
    </head>
    <body style="font-family: 'Noto Sans JP', Roboto; font-weight: 400">
        <table role="presentation" cellpadding="0" cellspacing="0" style="width: 740px;max-width: 100%;margin: 0 auto;padding: 0 10px;font-weight: 400;line-height: 1.3em;position: relative;color: #646464;">
        <tr>
            <td class="section" style="padding: 50px;">
                <h1 style="font-family: 'Noto Sans JP', Roboto;font-size: 28px;color: #505050;margin:0 0 13px; mso-line-height-rule:exactly;font-weight: 700;">お問い合わせを</h1>
                <h2 style="font-family: 'Noto Sans JP', Roboto;font-size: 28px;color: #505050;margin:0 0 35px; mso-line-height-rule:exactly;font-weight: 400;">受け付けました。</h2>
                <p style="font-family: 'Noto Sans JP', Roboto;font-size: 14px;color: #646464;font-weight: 400;margin:0;">こんにちは。
                    <b style="font-weight: 700;">マーク</b>様
                </p>
                <p style="font-family: 'Noto Sans JP', Roboto;font-size: 14px;color: #646464;font-weight: 400;margin:0;">お問い合わせいただきありがとうございます。</p>
                <p style="font-family: 'Noto Sans JP', Roboto;font-size: 14px;color: #646464;font-weight: 400;margin:0;">通常、翌営業日内までに担当スタッフより回答をご案内しております。</p>
                <p style="font-family: 'Noto Sans JP', Roboto;font-size: 14px;color: #646464;font-weight: 400;margin:0;">今しばらくお待ちください。</p>
            </td>
        </tr>
    </table>
    </body>
</html>

Answer 1

@MattHamer5 已经在评论中提到了这一点，但它似乎已经被刷过。他引用的文章也提到了这个 - https://litmus.com/blog/the-ultimate-guide-to-web-fonts

自定义字体在某些电子邮件客户端中不起作用。他们不会在其中工作的一个大问题，Gmail。看起来很奇怪，因为他们的母公司运行 Google 字体。
相信我，我们一直在兜圈子问为什么这个功能没有集成到 Gmail 中，但 Gmail 没有任何消息。

没有多少 CSS 字体导入可以解决这个问题。这是 Gmail 中基本缺乏集成（除非您在 machine/device 上安装了字体）。

通常，我们依赖后备网络安全字体，如 Arial、Helvetica、Verdana、Georgia 等，以允许任何不支持自定义字体的电子邮件客户端优雅地后备到最适合我们的字体 design/brand.
所以你的字体声明可以这样读：

font-family: 'Noto Sans JP', Helvetica, Arial, sans-serif;

或者它会被优化以声明最适合日文字符的网络安全字体。

日本电子邮件网络字体

Japanese Email Webfont

html

css

html-email

webfonts

cjk