Webfonts 在通过样式表“link”加载的邮件中不起作用

Webfonts not working in mail loaded via stylesheet `link`

提问人:goulashsoup 提问时间:9/26/2023 更新时间:9/27/2023 访问量:41

问:

我用 FontsourceWebpack Encore 生成的“样式表”标签替换了链接。@font-facefonts.gstatic.comlinkfont-source-sans-pro-300.e7f3684c.css

工作:使用链接到:@font-facefonts.gstatic.com

邮件源(通过 Thunderbird 源视图)

<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Diso-8859-=
1"><meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
=3D1.0">
<style>
    @font-face {
        font-family: 'Source Sans Pro';
        font-style: normal;
        font-weight: 300;
        font-display: swap;
        src: url(https://fonts.gstatic.com/s/sourcesanspro/v21/6xKydSBYKcSV=
-LCoeQqfX1RYOo3ik4zwlxdu.woff2) format('woff2');
        unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C=
6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2=
212, U+2215, U+FEFF, U+FFFD;
    }
    body {
        padding: 0;
        margin: 0;
        font-family: 'Source Sans Pro', 'Segoe UI', 'Droid Sans', Tahoma, A=
rial, sans-serif;
        background: #F1F2F6;

    }
    ...
</style>
</head>

不起作用:使用标签链接到:linkfont-source-sans-pro-300.e7f3684c.css

邮件源(通过 Thunderbird 源视图)

<head>
<meta http-equiv=3D"Content-Type" content=3D"text/html; charset=3Diso-8859-=
1"><meta name=3D"viewport" content=3D"width=3Ddevice-width, initial-scale=
=3D1.0">
    <link href=3D"https://example.com/public/assets/dist/font-source-sans=
-pro-300.e7f3684c.css" rel=3D"stylesheet">
<style>
    body {
        padding: 0;
        margin: 0;
        font-family: 'Source Sans Pro', 'Segoe UI', 'Droid Sans', Tahoma, A=
rial, sans-serif;
        background: #F1F2F6;

    }
    ...
</style>
</head>

font-source-sans-pro-300.e7f3684c.css肯定存在(通过 Chrome 调用)。

https://example.com/public/assets/dist/font-source-sans-pro-300.e7f3684c.css

@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-cyrillic-ext-300-normal.dccf01dc.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-cyrillic-ext-300-normal.47a42b8f.woff) format("woff");unicode-range:u+0460-052f,u+1c80-1c88,u+20b4,u+2de0-2dff,u+a640-a69f,u+fe2e-fe2f}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-cyrillic-300-normal.fbcc5580.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-cyrillic-300-normal.c67ae20d.woff) format("woff");unicode-range:u+0301,u+0400-045f,u+0490-0491,u+04b0-04b1,u+2116}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-greek-ext-300-normal.1854cf65.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-greek-ext-300-normal.ce7070f7.woff) format("woff");unicode-range:u+1f??}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-greek-300-normal.e9753ea4.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-greek-300-normal.ae46fd41.woff) format("woff");unicode-range:u+0370-03ff}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-vietnamese-300-normal.ee5533f3.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-vietnamese-300-normal.01ae78a9.woff) format("woff");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-latin-ext-300-normal.7087488c.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-latin-ext-300-normal.bbc0d99b.woff) format("woff");unicode-range:u+0100-02af,u+0304,u+0308,u+0329,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20cf,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-display:swap;font-family:Source Sans Pro;font-style:normal;font-weight:300;src:url(/public/assets/dist/fonts/source-sans-pro-latin-300-normal.1fc6c01d.woff2) format("woff2"),url(/public/assets/dist/fonts/source-sans-pro-latin-300-normal.09c2ee34.woff) format("woff");unicode-range:u+00??,u+0131,u+0152-0153,u+02bb-02bc,u+02c6,u+02da,u+02dc,u+0304,u+0308,u+0329,u+2000-206f,u+2074,u+20ac,u+2122,u+2191,u+2193,u+2212,u+2215,u+feff,u+fffd}

如您所见,链接了多种字体以支持所有 URL 相对于的 unicode 范围。 ().我还可以使用浏览器下载字体,例如 https://example.com/public/assets/dist/fonts/source-sans-pro-latin-ext-300-normal.bbc0d99b.woffexample.comsrc:url(/public/...

Thunderbird 检查器清楚地表明,它被用来代替:ArialSource Sans Pro

Arial used

我希望我的邮件可以工作,因为链接标签甚至似乎建议在邮件中加载网络字体:https://www.litmus.com/blog/typography-tips-for-email-designers

我唯一的想法是不允许使用相对 s,但这是在 CSS 中链接相对文件的“方式”。urlfont-source-sans-pro-300.e7f3684c.css

有想法或知道为什么网络字体在我的邮件中不起作用吗?

CSS 电子邮件 网络字体

评论

0赞 tacoshy 9/26/2023
电子邮件几乎不支持该标签。它也不支持外部资源。唯一支持它的供应商是苹果:caniemail.com/search/?s=%40fontstyle
0赞 goulashsoup 9/26/2023
@tacoshy 您的链接是关于 的,它已经可以使用谷歌字体,所以很明显这不是问题,而是如何使用链接的样式表。@font-face
0赞 tacoshy 9/27/2023
您可以使用相同的链接:caniemail.com/features/html-link
0赞 goulashsoup 9/27/2023
@tacoshy愚蠢的我,你是对的,谢谢,下次会事先检查网站。

答:

0赞 goulashsoup 9/27/2023 #1

正如 tacoshy 所评论的那样,Thunderbird 不支持: https://www.caniemail.com/features/html-link/<link>