📧E-Mail 研究：Outlook 字體設定

最近被 Outlook 弄的一個頭兩個大……(￣┰￣*)

我知道 Outlook 之類的 E-Mail 軟體，對 CSS 、HTML 支援度不高，不過我沒想到 Outlook 光是字體就這麼複雜……

我的電腦有以下字體

字體	別名	備註
思源黑體	Source Han Sans TC	這是從 Adobe那下載下來的，所以 font name 不是 Noto Sans CJK TC 或是 Noto Sans TC
微軟正黑體	Microsoft Jheng Hei	Windows 默認字體
Arial

以下是用 Outlook 寄送 E-Mail 時，CSS 與字體顯示的狀況

CSS	中文顯示字體			英語顯示字體
	思源黑體	微軟正黑體	系統默認字體 （新細明體）	思源黑體	微軟正黑體	Arial	系統默認字體 （新細明體）
font-family: 'Noto Sans CJK TC', 'Source Han Sans TC', '思源黑體', Noto Sans TC, '微軟正黑體', Arial, Helvetica, sans-serif			☑️				☑️
font-family: '思源黑體', sans-serif	☑️			☑️
加上mso-ascii-font-family font-family: 'Noto Sans CJK TC', 'Source Han Sans TC', '思源黑體', Noto Sans TC, '微軟正黑體', Arial, Helvetica, sans-serif; mso-ascii-font-family: Arial, Helvetica, sans-serif;			☑️			☑️
mso-ascii-font-family 故意設置一個電腦沒有的字體。 font-family: 'Noto Sans CJK TC', 'Source Han Sans TC', '思源黑體', Noto Sans TC, '微軟正黑體', Arial, Helvetica, sans-serif; mso-ascii-font-family: Hurricane, Arial, Helvetica, sans-serif;			☑️			☑️
改成使用 mso-hansi-font-family，另外 font-family 設置一個電腦沒有的字體。 font-family: 'jf-jinxuan-3.0', '思源黑體', Noto Sans TC, '微軟正黑體', Arial, Helvetica, sans-serif; mso-hansi-font-family: Arial, Helvetica, sans-serif;			☑️	☑️
維持 mso-hansi-font-family，font-family 改成英文字體在前；中文在後。 font-family: Arial, Helvetica, 'jf-jinxuan-3.0', '思源黑體', Noto Sans TC, '微軟正黑體', sans-serif; mso-hansi-font-family: Arial, Helvetica, sans-serif;	☑️					☑️
font-family 改成 mso-fareast-font-family、保留 mso-hansi-font-family mso-fareast-font-family: 'Noto Sans CJK TC', 'Source Han Sans TC', '思源黑體', Noto Sans TC, '微軟正黑體', Arial, Helvetica, sans-serif; mso-hansi-font-family: Arial, Helvetica, sans-serif;	☑️						☑️
改用 mso-fareast-font-family、保留 mso-ascii-font-family mso-fareast-font-family: 'Noto Sans CJK TC', 'Source Han Sans TC', '思源黑體', Noto Sans TC, '微軟正黑體', Arial, Helvetica, sans-serif; mso-ascii-font-family: Arial, Helvetica, sans-serif;		☑️				☑️
改成 font-family + mso-ascii-font-family + mso-fareast-font-family font-family: Arial, Helvetica, 'jf-jinxuan-3.0', '思源黑體', Noto Sans TC, '微軟正黑體', sans-serif; mso-fareast-font-family: '思源黑體', Noto Sans TC, '微軟正黑體', Arial, Helvetica, sans-serif; mso-ascii-font-family: Arial, Helvetica, sans-serif;	☑️					☑️
font-family + mso-ascii-font-family + mso-fareast-font-family，mso-fareast-font-family 加上電腦不存在的字體 font-family: Arial, Helvetica, 'Noto Sans CJK TC', '思源黑體', Noto Sans TC, '微軟正黑體', 'Noto Sans CJK TC', sans-serif; mso-fareast-font-family: 'jf-jinxuan-3.0', '思源黑體', 'Noto Sans CJK TC', Noto Sans TC, '微軟正黑體', 'Noto Sans CJK TC', sans-serif; mso-ascii-font-family: Arial, Helvetica, sans-serif;	☑️					☑️

總結起來，Outlook 麻煩的點太多了

1. font-family 如果設置多筆，不會像一般瀏覽器那樣一個一個查找字體存不存在，而是只看第一個 font name
2. 得靠 mso 的 CSS 設定才能設置多種字體
3. mso css 不是 w3c 官方的CSS，而且也缺乏微軟的文件。

我這還只是字體，更別提圖片等地跑版了……

參考資料

HTeuMeuLeu (2019, July 17). Today I learned about mso-generic-font-family…. HTeuMeuLeu.com. https://www.hteumeuleu.com/2019/today-i-learned-about-mso-generic-font-family/

mengmeng12138 (2023, August 15). CSS中关于mso的所有属性（AI生成准确性未校验）. CSDN博客. https://blog.csdn.net/mengmeng12138/article/details/131963810

Mark Robbins (2023, March 1). Using MSO- styles in Email. https://www.goodemailcode.com/email-enhancements/mso-styles

參考工具

The style attributes used by Microsoft Office 2000