2

我要疯了。我正在尝试在我的电子邮件中使用购买的字体，但我无法调试出了什么问题/为什么它不起作用。这是当前的头部和 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>

所以你会看到有很多次我试图包含它，但仍然没有运气。知道我在搞砸什么吗？

4

3 回答 3

1

当您在浏览器中打开电子邮件模板时，它是否有效？问题是，HTML 邮件是一件棘手的事情，尤其是涉及到所有浏览器多年来都支持的 CSS 标准时。目前只有少数邮件客户端（见下文）支持@font-face，所以这可能是为什么这不起作用的原因，因为我不知道你的目标客户端是什么。请注意，一些最常见的客户端，如 GMail、Inbox、最新的 Outlook for Windows 或 Yahoo Mail 不支持此功能（2018 年 4 月）！

客户支持@font-face

桌面

  • 美国在线桌面
  • 苹果邮件 10
  • 展望 2000-03
  • 适用于 Mac 的 Outlook
  • 邮箱（部分）
  • 雷鸟（部分）

移动的

  • 安卓 4.4.4 邮件
  • 美国在线奥拓
  • iOS10（或更高版本）邮件应用
  • 安卓版展望
  • 麻雀

网络邮件

  • 美国在线邮件

资源

编写 HTML 邮件模板可能真的很痛苦，因此您可能需要查看我上面链接的页面，以了解您实际可以安全使用的内容。可悲的是，它不会像现代浏览器支持的那样多，但你应该避免使用 CSS 声明<head>（始终使用内联 CSS 处理 HTML 邮件，这是我推荐的唯一方法），<table>用于布局（我明白了，您实际上是这样做的），并始终检查您要应用的 CSS 规则。

因此，如果您想将购买的字体用作标题，您可以为此使用图片。但这实际上不是一个好主意，如果您想将其用作正文字体。

于 2018-04-16T11:57:29.290 回答
0

请注意，某些字体格式不适用于所有浏览器；您可以使用fontsquirrel.com 的生成器来避免过多的转换工作。

您可以找到 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;}

这应该有效。

于 2018-04-16T11:57:53.787 回答
0

这是一个将您的代码与 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>

干杯

于 2018-04-17T05:19:02.653 回答