Outlook 2007/2013 không hiển thị khai báo phông chữ CSS của gia đình

Question

Tôi đang thử nghiệm thiết kế email với Litmus và cho cuộc sống của tôi Tôi không thể đặt phông chữ của mình được đặt chính xác trong Outlook 2007/2010/2013. Mỗi HTML đơn/CSS lừa/hack tiếp tục render trong Times New Roman:

'

tôi chủ yếu sử dụng các bảng đơn giản để bố trí, vì vậy tất cả nội dung là cuối cùng trong một yếu tố TD.

Dưới đây là các kỹ thuật khác nhau mà tôi đã cố gắng đặt phông chữ.

Tuyên bố STYLE của tôi: Đã thử tính năng này trong cả thẻ HEAD và BODY & không hoạt động.

<style> 
@font-face { 
    font-family: proxima-nova; 
    src: url('assets/ProximaNova-Reg.otf'); 
} 
@font-face { 
    font-family: proxima-nova-blk; 
    src: url('http://assets/ProximaNova-Black.otf'); 
} 
body *, td, p, li { 
    font-family: font-family:proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif; 
} 
</style> 

CSS STYLE thuộc tính thiết lập trên các yếu tố TD:

<td style="font-family:proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif; color:#FFFFFF; font-weight:300;font-size:18px;"> 

FONT tag với cả FACE và STYLE thuộc tính thiết lập:

<font face="proxima-nova,Proxima Nova Regular,Proxima Nova,verdana,sans-serif" 
    style="font-size:28px; 
    font-family:proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif;"> 

Inline CSS STYLE thuộc tính trên tất cả các các phần tử văn bản bên trong (P, LI, A):

Tôi hoàn toàn bị bối rối. Trên tất cả các ứng dụng khách có liên quan khác, mọi thứ đều hoạt động tốt và có thể được mong đợi (ví dụ: phông chữ hiển thị như tôi mong đợi với nhiều lỗi khác nhau), bao gồm iOS, Gmail, Outlook 2003/Express, v.v.

Answer 1

Tôi đã theo dõi vấn đề này với khai báo STYLE của tôi, sử dụng phông chữ @ để lấy tệp phông chữ tùy chỉnh để hỗ trợ khách hàng (ví dụ: Apple). Rõ ràng, một cái gì đó về việc sử dụng này của phá vỡ tuyên bố @ font-face trong Outlook 2007 - 20013.

<style> 
@font-face { 
    font-family: proxima-nova; 
    src: url('http://assets/ProximaNova-Reg.otf'); 
} 
@font-face { 
    font-family: proxima-nova-blk; 
    src: url('http://assets/ProximaNova-Black.otf'); 
} 
</style> 

tôi cần để có được MS Outlook để bỏ qua thẻ STYLE này, vì vậy tôi quấn toàn bộ khối với thẻ [if !mso]:

<!--[if !mso]><!--> 
<style> 
@font-face { 
... 
} 
</style> 
<!--<![endif]--> 

Ồ, điều đó khiến tôi phát điên.

Answer 2

Tôi đã thử giải pháp của bạn với thẻ [if! Mso], nhưng vì một số lý do nó không hoạt động. Cuối cùng tôi đã tìm thấy một giải pháp khác:

Bạn có thể sử dụng phông chữ-thẻ với thuộc tính khuôn mặt để buộc phông chữ dự phòng phù hợp trong các ứng dụng khách như Outlook 2007/2010/2013. Ví dụ:

<td style="color:#FFFFFF; font-weight:300;font-size:18px;"> 
    <font face="proxima-nova,'Proxima Nova Regular','Proxima Nova',verdana,sans-serif" 
</td> 

Tôi đã thử nghiệm này trong Litmus và trong Outlook 2007/2010/2013 nó sẽ dự phòng để Verdana và trong những khách hàng làm hỗ trợ phông chữ tùy chỉnh, nó sẽ hiển thị PROXIMA-nova.

Tôi hy vọng điều này sẽ hữu ích.