ES EN IT
MENU
 
 
 

BLOG

WEB FONT E OUTLOOK

Il problema principale per gli sviluppatori alle prese con i CSS è, da sempre, la compatibilità cross-browser. Per stessa ammissione (postuma) della Microsoft l’imputato numero uno era (ed è tuttora) Internet Explorer. Ma, nonostante oggi questo problema sia gestibile anche grazie all'ausilio di numerose risorse web, - framework e script in grado di estendere il supporto alle media query e agli elementi strutturali di HTML5 anche a Internet Explorer -, Microsoft, con il suo client di posta Outlook (2007/10/13), rimane la pecora nera del supporto CSS.

Anche in questo caso molti servizi, framework e strumenti online ci vengono in aiuto per superarne i limiti e cercare di sviluppare un layout che sia compatibile con la maggior parte dei client di posta utilizzati; ma la compatibilità con Outlook rimane oggettivamente l'ostacolo più difficile da superare.

Uno degli ambiti per cui si rende necessario mettere in campo trucchetti o piccoli espedienti affinché Oulook si comporti come gli altri client di posta riguarda l'utilizzo e l'incorporamento delle web font. Outlook, infatti, non solo non consente di incorporare le web font ma non riconosce nemmeno una semplice istruzione di fallback (font-family: "font principale", "font sostitutiva", genere), renderizzando tutte le nostre newsletter con il simpatico Times New Roman (!).

Tralasciamo tutte le questioni legate alle dimensioni dei caratteri e a tutto ciò che comporta la corretta selezione della font principale e del suo sostituto (le cosiddette web safe font) affinché, in caso di sostituzione, non vi siano macroscopici salti di scala che rendano le nostre newslettwer illeggibili, e concentriamoci su come strutturare il codice.

Innanzitutto dobbiamo incorporare la web font con uno dei tre metodi possibili: @import, <link> oppure @font-face

    
    	<head>
        <link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
    

Poi definiamo le web safe font sia nel tag <style>

    
		<style type="text/css">
		p {font-family:Tahoma,sans-serif;font-size:12pt;line-height:16pt;}  
    

sia in linea, direttamente nel tag specifico a cui vogliamo assegnare la formattazione, con eventuali altre dichiarazioni (margin, color, ecc).

    
    	<p style="font-family:Tahoma,sans-serif;font-size:12pt;line-height:16pt;font-weight:normal;margin-bottom:10pt;color:#CC0000;">Gent.le cliente,</p>
    

A questo punto non ci rimane che inserire la parte di codice che, utilizzando le media query, non verrà interpretata da Outlook e servirà a definire la visualizzazione delle web font per tutti i client che le supportano.

    
        @media only screen and (min-width: 0) and (max-width: 600px){
        p {font-family:Lato,Tahoma,sans-serif;font-size:12pt;line-height:16pt;}
        }
    

That's all folks!

function onSubmit(token) { document.getElementById("id-validate").submit(); }