CSS: 如何自定义邮件中的字体？

Question

我正在尝试为电子邮件设置自定义字体。在电子邮件的 HTML 中，我使用以下代码添加了字体：

    <head>
    <style>
        /* latin-ext */
        @font-face {
        font-family: 'BVP';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/bevietnampro/v10/QdVPSTAyLFyeg_IDWvOJmVES_Hw5BXoKZA.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        /* latin */
        @font-face {
        font-family: 'BVP';
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/bevietnampro/v10/QdVPSTAyLFyeg_IDWvOJmVES_Hw3BXo.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
        /* latin-ext */
        @font-face {
        font-family: 'BVP';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/bevietnampro/v10/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG87Rb0bcw.woff2) format('woff2');
        unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
        /* latin */
        @font-face {
        font-family: 'BVP';
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/bevietnampro/v10/QdVMSTAyLFyeg_IDWvOJmVES_HSMIG81Rb0.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
        }
    </style>
</head>

当我尝试将字体样式应用到我的代码时，我已经内联完成了它，就像您在此处看到的那样：

<h1 style = "font-family: BVP, sans-serif !important; font-style: normal; font-weight: 700; color: #DBAFB4; margin: 0 auto">Congratulations!!!</h1>

但是它没有应用到 HTML 的样式，因为默认情况下有一个样式，尽管在我的样式定义中应用了“!important”，但我不知道如何删除它。

如果我在控制台中检查我的代码，我们可以看到应用的自定义字体样式：

检查我们的代码，我们可以看到默认应用此样式，避免应用 HTML:

中定义的字体样式

如果我们检查应用此样式默认的文本，我们可以看到：

但是如果我们从控制台中删除这些样式：

我们可以看到字体样式是如何应用的：

这怎么可能？如何默认删除此样式或将字体样式正确应用到 HTML 电子邮件？

Answer 1

Gmail 仅支持 Google Sans 和 Roboto 字体（除非您希望其他电子邮件客户端使用它，否则您不必加载它们）。

只有一些电子邮件客户端支持任何网络字体，即 Apple Mail 和其他几个：https://www.caniemail.com/features/css-at-font-face/

不要使用 !important 内联，这可能会在某些电子邮件客户端中去除整个样式。

否则，你做的很好（除了想要删除 a3s class）。它只是不适用于 Gmail，在这种情况下，我会将您的 font-stack 扩展为，例如font-family: BVP, Roboto, Arial, sans-serif;

另一个提示：您通常可以删除 /* latin-ext */ 部分，而不加载该字体，除非您使用扩展字符集（重音和奇怪的东西）。

如果您需要进一步的帮助，请分享您的完整代码。

CSS: 如何自定义邮件中的字体？

CSS: How to customize fonts in an email?

html

css

email

html-email