提问人:goulashsoup 提问时间:9/26/2023 更新时间:9/27/2023 访问量:41
Webfonts 在通过样式表“link”加载的邮件中不起作用
Webfonts not working in mail loaded via stylesheet `link`
问:
我用 Fontsource 的 Webpack Encore 生成的“样式表”标签替换了链接。@font-face
fonts.gstatic.com
link
font-source-sans-pro-300.e7f3684c.css
工作:使用链接到:@font-face
fonts.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>
不起作用:使用标签链接到:link
font-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.com
src:url(/public/...
Thunderbird 检查器清楚地表明,它被用来代替:Arial
Source Sans Pro
我希望我的邮件可以工作,因为链接标签甚至似乎建议在邮件中加载网络字体:https://www.litmus.com/blog/typography-tips-for-email-designers
我唯一的想法是不允许使用相对 s,但这是在 CSS 中链接相对文件的“方式”。url
font-source-sans-pro-300.e7f3684c.css
有想法或知道为什么网络字体在我的邮件中不起作用吗?
答:
正如 tacoshy 所评论的那样,Thunderbird 不支持: https://www.caniemail.com/features/html-link/<link>
评论
style
@font-face