英文:
Outlook ignoring font size
问题
使用：
<html>
<head>
<style>
p {
font-size: 16px;
}
.font-size-16 {
font-size: 16px !important;
}
</style>
</head>
<body>
<p>Duis eros mauris, sodales et ullamcorper ac, ultrices vitae mi. Morbi scelerisque tristique nibh, eget venenatis erat mattis maximus. Donec vestibulum auctor consectetur.</p>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/contact/support/" style="font-family: Verdana, Geneva, sans-serif; height: 54px !important; width: 125px !important; padding-top: 10px; text-decoration: none; background-color: #2747d7!important; color: #fff !important; v-text-anchor:middle;" arcsize="20%" strokecolor="white" fillcolor="#2747d7">
<w:anchorlock/>
<center class="font-size-16" style="color:#ffffff; font-size:16px;">Contact us</center>
</v:roundrect>
<![endif]-->
</body>
</html>
段落字体大小始终显示为16px，但<v:roundrect><center>的字体大小在不同版本的Outlook中会有不同，通常会小约2px。如何在Outlook中实现一致的字体大小，特别是在上面的示例中的<v:roundrect><center>样式？
从此答案中，我已经从内联样式中删除了!important;并在<head>中添加了一个样式，但问题仍然存在。
解决方案
Nathan的答案激发了解决方案：
<style>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
</style>
<!--[if mso]>
<style>
.font-size-override-button {
font-size: 12pt !important;
text-decoration: none;
}
</style>
<![endif]-->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.example.com/contact/support/" style="height:39px;v-text-anchor:middle;width:125px;" arcsize="30%" stroke="f" fillcolor="#2747d7">
<w:anchorlock/>
<center>
<![endif]-->
<a href="https://www.example.com/contact/support/" class="font-size-override-button" style="background-image: linear-gradient(90deg, #2747D7 0%, #6127E7 51%, #2747D7 100%) !important; background-position-x: 0 !important; background-position-y: 0 !important; background-repeat: no-repeat !important; background-size: 200% auto !important; background-color: #2747d7 !important; border-radius:8px;color:#ffffff;display:inline-block;font-family:Verdana,Geneva,sans-serif;font-weight:bold;line-height:39px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;">Contact us</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
英文:
Using:
<html>
<head>
<style>
p {
font-size: 16px;
}
.font-size-16 {
font-size: 16px !important;
}
</style>
</head>
<body>
<p>Duis eros mauris, sodales et ullamcorper ac, ultrices vitae mi. Morbi scelerisque tristique nibh, eget venenatis erat mattis maximus. Donec vestibulum auctor consectetur.</p>
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://example.com/contact/support/" style="font-family: Verdana, Geneva, sans-serif; height: 54px !important; width: 125px !important; padding-top: 10px; text-decoration: none; background-color: #2747d7!important; color: #fff !important; v-text-anchor:middle;" arcsize="20%" strokecolor="white" fillcolor="#2747d7">
<w:anchorlock/>
<center class="font-size-16" style="color:#ffffff; font-size:16px;">Contact us</center>
</v:roundrect>
<![endif]-->
</body>
</html>
the paragraph font size always displays as 16px but the <v:roundrect><center> displays in a variety of different font sizes, usually about 2px smaller, over different versions of Outlook.
How do we achieve a consistent font size in Outlook in general, and as a style for <v:roundrect><center> in the above example?
From this answer, I've removed !important; from the inline style and added a style to the <head> but the issue remains.
Help appreciated.
Solution
Nathan's answer prompted the solution:
<style>
body {
font-family: Verdana, Geneva, sans-serif;
font-size: 16px;
}
</style>
<!--[if mso]>
<style>
.font-size-override-button {
font-size: 12pt !important;
text-decoration: none;
}
</style>
<![endif]-->
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="https://www.example.com/contact/support/" style="height:39px;v-text-anchor:middle;width:125px;" arcsize="30%" stroke="f" fillcolor="#2747d7">
<w:anchorlock/>
<center>
<![endif]-->
<a href="https://www.example.com/contact/support/" class="font-size-override-button" style="background-image: linear-gradient(90deg, #2747D7 0%, #6127E7 51%, #2747D7 100%) !important; background-position-x: 0 !important; background-position-y: 0 !important; background-repeat: no-repeat !important; background-size: 200% auto !important; background-color: #2747d7 !important; border-radius:8px;color:#ffffff;display:inline-block;font-family:Verdana,Geneva,sans-serif;font-weight:bold;line-height:39px;text-align:center;text-decoration:none;width:125px;-webkit-text-size-adjust:none;">Contact us</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]-->
答案1
得分: 1
Sure, here's the translated content:
尝试使用pt而不是px。当不同版本的Outlook显示不同的内容时，通常是这个问题。3pt = 4px，因此12pt = 16px。
即：<center style="color:#ffffff; font-size:12pt;">联系我们</center>
我认为如果还没有的话，您也需要在
部分添加以下内容：<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--[if mso]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
英文:
Try pt instead of px. When there's different versions of Outlook showing different things, that's usually it. 3pt = 4px, so 12pt = 16px.
i.e. <center style="color:#ffffff; font-size:12pt;">Contact us</center>
I think you'll also need this in the head if it isn't already:
<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<!--[if mso]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论