日语电子邮件Webfont

问题描述 投票:0回答:3

我一直在研究带有日语字符的电子邮件模板,对此问题困扰了几天。

问题是,我在电子邮件模板上呈现字体所需的输出没有实现。我正在尝试使用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>
html css html-email webfonts cjk
3个回答
0
投票

Japanese typography

网络上的日语排版-提示和技巧


0
投票

@@ MattHamer5已经在评论中提到了此问题,但似乎已通过。他引用的文章也提到了-https://litmus.com/blog/the-ultimate-guide-to-web-fonts

自定义字体在某些电子邮件客户端中不起作用。他们将无法使用的一大Gmail。由于其母公司运行Google字体,因此看起来有些奇怪。相信我,我们所有人都转过头来询问为什么没有将此功能集成到Gmail中,但是Gmail对此没有任何消息。

没有多少CSS字体导入将解决此问题。这是Gmail中基本缺乏集成的功能(除非您在计算机/设备上安装了字体)。

[通常,我们依靠后备Web安全字体,例如Arial,Helvetica,Verdana,乔治亚州等,以允许任何不支持自定义字体的电子邮件客户端正常地后退为最适合我们的设计/品牌的字体。因此,您的字体声明应如下所示:

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

或者将进行优化以声明最适合日语字符的网络安全字体。


-1
投票

© www.soinside.com 2019 - 2024. All rights reserved.