@font-face 中的自定义字体不起作用
Posted
技术标签:
【中文标题】@font-face 中的自定义字体不起作用【英文标题】：Custom font in @font-face not working 【发布时间】：2018-09-26 03:04:54 【问题描述】：我要疯了。我正在尝试在我的电子邮件中使用购买的字体，但我无法调试出了什么问题/为什么它不起作用。这是当前的头部和 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/cs-s-ref/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 代码，因此我们无法自行对其进行测试以了解问题所在。您没有提到哪些电子邮件客户端不起作用，因此我们无法轻易告诉您自定义字体在该客户端上不起作用。 上面提供的代码缺少结束样式、头部、结束正文和 HTML。除此之外，代码似乎可以工作，因为我的机器上有字体？尝试关闭元素/标签，您的字体缺少单引号（没有它，代码也可以工作）。在montreal-regular 之后你也有两次常规。
【参考方案1】：
当您在浏览器中打开电子邮件模板时，它是否有效？问题是，HTML 邮件是一件棘手的事情，尤其是涉及到所有浏览器多年来都支持的 CSS 标准时。目前只有少数邮件客户端（见下文）支持@font-face，所以这可能是为什么这不起作用的原因，因为我不知道你的目标客户端是什么。请注意，一些最常见的客户端，如 GMail、Inbox、最新的 Outlook for Windows 或 Yahoo Mail 不支持此功能（2018 年 4 月）！
支持@font-face的客户端
桌面
AOL 桌面 苹果邮件 10 展望 2000-03 Mac 版 Outlook 邮箱（部分） 雷鸟（部分）手机
android 4.4.4 邮件 美国在线阿尔托 ios10（或更新）邮件应用 Android 版 Outlook 麻雀网络邮件
美国在线邮件Source
编写 HTML 邮件模板可能非常痛苦，因此您可能需要查看我上面链接的页面，以了解您实际可以安全使用的内容。可悲的是，它不会像现代浏览器支持的那样多，但你应该避免像<head> 中的 CSS 声明（始终对 HTML 邮件使用内联 CSS，这是我推荐的唯一方法），使用 <table>对于布局（我知道，您实际上是这样做的），并始终检查您要应用的 CSS 规则。
因此，如果您想将购买的字体用于标题，您可以为此使用图片。但这实际上不是一个好主意，如果您想将其用作正文字体。
【讨论】：
【参考方案2】：请注意，某些字体格式并非适用于所有浏览器；您可以使用fontsquirrel.com's generator 来避免过多的转换工作。
您可以找到 Google Fonts 提供的一组不错的免费网络字体（还具有自动生成的 CSS @font-face 规则，因此您不必自己编写）。
还有：
@font-face
font-family: 'MyWebFont';/*a name to be used later*/
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
对于现代浏览器来说更好
@font-face
font-family: 'MyWebFont';
src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
同时，请确保在引用自定义字体时使用单引号或双引号。 例如
p font-family: 'montreal-mediumregular', Lucida Grande, Lucida Sans Unicode, Tahoma, sans-serif;
这应该可行。
【讨论】：
【参考方案3】：这是一个使用 Google 字体的代码示例。希望这能让您了解代码中哪里出错了。 注意：Web 字体并非适用于所有电子邮件客户端。如需支持，请查看上面的 @Mattias 列表。
/* latin-ext */
@font-face
font-family: 'Signika';
font-style: normal;
font-weight: 400;
src: local('Signika Regular'), local('Signika-Regular'), url(https://fonts.gstatic.com/s/signika/v8/vEFR2_JTCgwQ5ejvG18mBkho.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: 'Signika';
font-style: normal;
font-weight: 400;
src: local('Signika Regular'), local('Signika-Regular'), url(https://fonts.gstatic.com/s/signika/v8/vEFR2_JTCgwQ5ejvG1EmBg.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;
<!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">
</head>
<body style="font-family: 'Signika',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:'Signika', 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>
</td>
</tr>
</table>
</body>
</html>干杯
【讨论】：
以上是关于@font-face 中的自定义字体不起作用的主要内容，如果未能解决你的问题，请参考以下文章