我要疯了。我正在尝试在我的电子邮件中使用购买的字体，但我无法调试问题所在/为什么它不起作用。这是当前的头部和 DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="IE=edge">
然后我还做了一个样式声明，我使用@font-face 来定义这个自定义字体。 (我已经删除了下面的 cloudapp 链接，因为它们被缩短了，但我已经根据这个例子检查了列表本身 https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_font-face_rule_bold 以查看链接是否有效(通过将我的链接替换为他们的链接)并且它也在那里。
<style type="text/css">
@font-face {
font-family:'montreal-regularregular';
src:url([the actual Url hosted on cloudapp]) format("woff2"),
url([the actual Url hosted on cloudapp]) format("woff")
url([the actual Url hosted on cloudapp]) format('truetype'); font-weight:normal; font-style:normal;}
@font-face {
font-family:'montreal-boldregular';
src:url([the actual Url hosted on cloudapp]) format("woff2"),
url([the actual Url hosted on cloudapp]) format("woff"); font-weight:normal; font-style:normal;}
@font-face {
font-family:'montreal-mediumregular' !important;
src:url([the actual Url hosted on cloudapp]) format("woff2") !important,
url([the actual Url hosted on cloudapp]) format("woff")!important,
url([the actual Url hosted on cloudapp]) format('truetype')!important; font-weight:normal; font-style:normal;}
@font-face {
font-family:'montreal-demiboldregular';
src:url([the actual Url hosted on cloudapp]) format("woff2"),
url([the actual Url hosted on cloudapp]) format("woff")
url([the actual Url hosted on cloudapp]) format("truetype"); font-weight:normal; font-style:normal;}
你会看到我已经包含了 !important (尽管看起来这也没有用)。然后当我稍后在 <td> 中引用字体时我这样做:
<body style="font-family: montreal-regularregular,Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; margin: 0">
<table align="center" style="max-width:600px;min-width:360px;width:100%;background:#ffffff;padding-bottom:30px;" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" style="padding:20px 30px 5px 30px;text-align:center;">
<p style="margin:0 20px;font-family:montreal-mediumregular, Lucida Grande, Lucida Sans Unicode, Tahoma, Sans-Serif; color:#000000;font-size:15px;line-height:25px;padding:20px 0px 25px 0px;text-align:left;">
Welcome back to the weekend 💃🕺 If you’re looking for a break from the boring weekday work vibes, then why not try something new?
</p>
所以你会看到有很多次我试图包括它，但仍然没有运气。知道我在搞砸什么吗？
最佳答案
当您在浏览器中打开电子邮件模板时，它是否有效？问题是，HTML 邮件是一件棘手的事情，尤其是涉及到所有浏览器多年来都支持的 CSS 标准时。只有少数邮件客户端(见下文)支持 @font-face目前，这可能就是为什么这不起作用的原因，因为我不知道您的目标客户是什么。请注意，一些最常见的客户端，如 GMail、Inbox、最新的 Outlook for Windows 或 Yahoo Mail 不支持此功能(2018 年 4 月)!
客户支持@font-face
桌面
- 美国在线桌面
- 苹果邮件 10
- 展望 2000-03
- Mac 版 Outlook
- 邮箱(部分)
- 雷鸟(部分)
移动
- Android 4.4.4 邮件
- 美国在线中音
- iOS10(或更高版本)邮件应用
- Android 版 Outlook
- 麻雀
网络邮件
- 美国在线邮件
编写 HTML 邮件模板真的很痛苦，所以您可能想看看我上面链接的页面，找出您实际可以安全使用的内容。可悲的是，它不会像现代浏览器支持的那样多，但你应该避免像 <head> 中的 CSS 声明这样的东西。 (始终对 HTML 邮件使用内联 CSS，这是我唯一推荐的做法)，使用 <table>对于布局(我明白了，你实际上是这样做的)，并始终检查你想要应用的 CSS 规则。
因此，如果您想将购买的字体用于标题，您可以为此使用图像。但如果您想将其用作正文字体，这实际上不是一个好主意。
关于html - @font-face 中的自定义字体不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49856213/