我在 HTML 电子邮件中嵌入了 Raleway 的两个权重,并希望自行托管。
我使用 Font Squirrel 转换了 Regular 和 Extra Bold 粗细,但只有常规粗细有效。不确定是否会存在某种冲突,因为它实际上是一种字体被嵌入为两种不同的字体?
字体文件本身在桌面上看起来是正确的。在本地浏览器中,两种字体都可以使用。
想知道是否有另一种方法来转换可以回避该问题的字体?
嵌入代码:
@font-face {
font-family: 'ralewayregular';
src: url('raleway-regular-webfont.eot');
src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('raleway-regular-webfont.woff') format('woff'),
url('raleway-regular-webfont.ttf') format('truetype'),
url('raleway-regular-webfont.svg#ralewayregular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'ralewayextrabold';
src: url('raleway-extrabold-webfont.eot');
src: url('raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('raleway-extrabold-webfont.woff') format('woff'),
url('raleway-extrabold-webfont.ttf') format('truetype'),
url('raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
font-weight: normal;
font-style: normal;
}
字体堆栈示例:
font-family: 'ralewayregular',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;
font-family: 'ralewayextrabold',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif;
编辑:
我之前尝试过修改后的字体堆栈,将 Raleway 视为具有两种粗细的一种字体。看起来额外的粗体现在在一些客户端中起作用,但在电子邮件客户端上不起作用,这些客户端通常可以毫无问题地显示网络字体,例如 iPad 上的 Apple Mail。
@font-face {
font-family: 'raleway';
src: url('raleway-regular-webfont.eot');
src: url('raleway-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('raleway-regular-webfont.woff') format('woff'),
url('raleway-regular-webfont.ttf') format('truetype'),
url('raleway-regular-webfont.svg#ralewayregular') format('svg');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'raleway';
src: url('raleway-extrabold-webfont.eot');
src: url('raleway-extrabold-webfont.eot?#iefix') format('embedded-opentype'),
url('raleway-extrabold-webfont.woff') format('woff'),
url('raleway-extrabold-webfont.ttf') format('truetype'),
url('raleway-extrabold-webfont.svg#ralewayextrabold') format('svg');
font-weight: 800;
font-style: normal;
}
修改后的字体堆栈:
<h1 style="font-size : 16px; line-height : 24px; letter-spacing : 2.72px; color: #ffffff; font-family: 'Raleway',Futura,'Gill Sans','Gill Sans MT', Calibri, sans-serif; font-weight: 800;">TEXT</h1>
最佳答案
首先,您不需要那些引号,因为您正在使 font-family 成为一个词。其次,你真的不需要有两个不同的字体名称,你可以通过保持相同的font-family
来保持相同的字体名称。名字但让你的font-weight:bold
在你的@font-face 的粗体部分。指定 font-weight
在你的内联 CSS 中或通过 <b>
或 <strong>
标签,它应该可以正常工作。除非你的@font-face 根本没有加载并且你的操作系统堆栈中有字体,否则仿粗体不是问题。
在测试之前,您还应该尝试从计算机的字体堆栈中禁用 raleway。我还在绝对路径上设置了字体文件的 url。
希望其中之一能有所帮助。
关于css - 嵌入了两个相同 webfont 的权重,只有一个有效,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19069809/