{"id":269,"date":"2010-03-04T14:32:04","date_gmt":"2010-03-04T13:32:04","guid":{"rendered":"https:\/\/www.artera.net\/it\/blog\/?p=269"},"modified":"2023-02-27T15:00:19","modified_gmt":"2023-02-27T15:00:19","slug":"css3-web-fonts","status":"publish","type":"post","link":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/","title":{"rendered":"CSS3 Web fonts"},"content":{"rendered":"

\"web-safe-fonts\"Nel mio ultimo post ho analizzato l’utilizzazione di Cufon<\/a>, una libreria Javascript<\/em> che aiuta noi programmatori a formattare i testi usando font particolari<\/strong>.<\/p>\n

Oggi vorrei, invece, presentare una breve introduzione dei Font Web con CSS3.<\/p>\n

Come descritto tra le specifiche ufficiali di CSS3, la regola CSS @font-face ci permette di usare qualsiasi classico font sul web<\/strong>. Questo vantaggio ci permette di usare, potenzialmente qualsiasi tipo di carattere, e non dover pi\u00f9 dipendere dai font “web-safe”.<\/p>\n

La sintassi della propriet\u00e0 @font-face \u00e8 semplice:<\/p>\n

\n
@font-face { <varie_regole_css><\/span> }<\/pre>\n<\/blockquote>\n
dove <varie_regole_css><\/span><\/em> ha il seguente formato:<\/p>\n
\n
regola_css: valore;\nregola_css: valore;\n[...]\nregola_css: valore;<\/pre>\n<\/blockquote>\n
Un esempio basilare di come applicare @font-face \u00e8 il seguente:<\/p>\n
\n
@font-face {\n  font-family: \"Helvetica Neue\";\n  src: url(http:\/\/www.ilnostrosito.com\/fonts\/HelveticaNeue.ttf);\n}\n\np { font-family: \"Helvetica Neue\", Verdana; }<\/pre>\n<\/blockquote>\n
Applicando le propriet\u00e0 CSS dell’esempio avremo i paragrafi del nostro sito formattati in Helvetica Neue.<\/p>\n
Discorso a parte va fatto per Internet Explorer<\/em>. Il Browser di casa Microsoft<\/strong> riconosce la propriet\u00e0 CSS @font-face, ma non i file dei font in formato TTF, OTF, ecc…
\nPer poter includere il file di un font per Internet Explorer \u00e8 necessario convertire il file in formato EOT Embedded Open Type.
\nIl tool che Microsoft mette a disposizione per la creazione dei file EOT \u00e8 WEFT.<\/p>\n
Ovviamente, come possiamo immaginare, questa procedura non \u00e8 il massimo per chi crede che il futuro sia negli standard.<\/p>\n","protected":false},"excerpt":{"rendered":"
Nel mio ultimo post ho analizzato l’utilizzazione di Cufon, una libreria Javascript che aiuta noi programmatori a formattare i testi usando font particolari. Oggi vorrei, invece, presentare una breve introduzione dei Font Web con CSS3. Come descritto tra le specifiche ufficiali di CSS3, la regola CSS @font-face ci permette di usare qualsiasi classico font sul […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[300],"tags":[69,68,70],"class_list":["post-269","post","type-post","status-publish","format-standard","hentry","category-marketing","tag-css3","tag-font","tag-web-fonts"],"yoast_head":"\n\u2022 CSS3 Web fonts - Artera<\/title>\n<meta name=\"description\" content=\"Leggi dal blog: CSS3 Web fonts. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u2022 CSS3 Web fonts - Artera\" \/>\n<meta property=\"og:description\" content=\"Leggi dal blog: CSS3 Web fonts. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/\" \/>\n<meta property=\"og:site_name\" content=\"Artera\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/artera.net\/\" \/>\n<meta property=\"article:published_time\" content=\"2010-03-04T13:32:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-27T15:00:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/web-safe-fonts.jpg\" \/>\n<meta name=\"author\" content=\"Sergio Ravera\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sergio Ravera\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minuto\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/\"},\"author\":{\"name\":\"Sergio Ravera\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\"},\"headline\":\"CSS3 Web fonts\",\"datePublished\":\"2010-03-04T13:32:04+00:00\",\"dateModified\":\"2023-02-27T15:00:19+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/\"},\"wordCount\":202,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/03\\\/web-safe-fonts.jpg\",\"keywords\":[\"CSS3\",\"font\",\"web fonts\"],\"articleSection\":[\"Marketing\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/\",\"name\":\"\u2022 CSS3 Web fonts - Artera\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/03\\\/web-safe-fonts.jpg\",\"datePublished\":\"2010-03-04T13:32:04+00:00\",\"dateModified\":\"2023-02-27T15:00:19+00:00\",\"description\":\"Leggi dal blog: CSS3 Web fonts. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/03\\\/web-safe-fonts.jpg\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2010\\\/03\\\/web-safe-fonts.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/marketing\\\/css3-web-fonts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"CSS3 Web fonts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#website\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"name\":\"Artera\",\"description\":\"Swiss Premium Hosting\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.artera.net\\\/it\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#organization\",\"name\":\"Artera\",\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.artera.net\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/artera-logo.png\",\"width\":300,\"height\":77,\"caption\":\"Artera\"},\"image\":{\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/artera.net\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/artera\\\/\",\"https:\\\/\\\/www.instagram.com\\\/artera_swiss\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.artera.net\\\/it\\\/#\\\/schema\\\/person\\\/48ffb6b3727677643fbfd3ecf0a10aa0\",\"name\":\"Sergio Ravera\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g\",\"caption\":\"Sergio Ravera\"},\"description\":\"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/sergioravera\\\/\"],\"url\":\"https:\\\/\\\/www.artera.net\\\/it\\\/author\\\/sergio-ravera\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u2022 CSS3 Web fonts - Artera","description":"Leggi dal blog: CSS3 Web fonts. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/","og_locale":"it_IT","og_type":"article","og_title":"\u2022 CSS3 Web fonts - Artera","og_description":"Leggi dal blog: CSS3 Web fonts. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","og_url":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/","og_site_name":"Artera","article_publisher":"https:\/\/www.facebook.com\/artera.net\/","article_published_time":"2010-03-04T13:32:04+00:00","article_modified_time":"2023-02-27T15:00:19+00:00","og_image":[{"url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/web-safe-fonts.jpg","type":"","width":"","height":""}],"author":"Sergio Ravera","twitter_card":"summary_large_image","twitter_misc":{"Scritto da":"Sergio Ravera","Tempo di lettura stimato":"1 minuto"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/#article","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/"},"author":{"name":"Sergio Ravera","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0"},"headline":"CSS3 Web fonts","datePublished":"2010-03-04T13:32:04+00:00","dateModified":"2023-02-27T15:00:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/"},"wordCount":202,"commentCount":3,"publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/web-safe-fonts.jpg","keywords":["CSS3","font","web fonts"],"articleSection":["Marketing"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/","url":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/","name":"\u2022 CSS3 Web fonts - Artera","isPartOf":{"@id":"https:\/\/www.artera.net\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/#primaryimage"},"image":{"@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/#primaryimage"},"thumbnailUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/web-safe-fonts.jpg","datePublished":"2010-03-04T13:32:04+00:00","dateModified":"2023-02-27T15:00:19+00:00","description":"Leggi dal blog: CSS3 Web fonts. Contattaci per una partnership! Artera Swiss Premium Hosting news, articoli e notizie interessanti dal mondo digitale.","breadcrumb":{"@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/#primaryimage","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/web-safe-fonts.jpg","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2010\/03\/web-safe-fonts.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.artera.net\/it\/marketing\/css3-web-fonts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.artera.net\/it\/"},{"@type":"ListItem","position":2,"name":"CSS3 Web fonts"}]},{"@type":"WebSite","@id":"https:\/\/www.artera.net\/it\/#website","url":"https:\/\/www.artera.net\/it\/","name":"Artera","description":"Swiss Premium Hosting","publisher":{"@id":"https:\/\/www.artera.net\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.artera.net\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/www.artera.net\/it\/#organization","name":"Artera","url":"https:\/\/www.artera.net\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/","url":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","contentUrl":"https:\/\/www.artera.net\/wp-content\/uploads\/2019\/09\/artera-logo.png","width":300,"height":77,"caption":"Artera"},"image":{"@id":"https:\/\/www.artera.net\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/artera.net\/","https:\/\/www.linkedin.com\/company\/artera\/","https:\/\/www.instagram.com\/artera_swiss\/"]},{"@type":"Person","@id":"https:\/\/www.artera.net\/it\/#\/schema\/person\/48ffb6b3727677643fbfd3ecf0a10aa0","name":"Sergio Ravera","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/618f2c20338bb422bd317eae8d6c9c097ba85d3f5a1da18e21ecf5da5ee3a448?s=96&d=mm&r=g","caption":"Sergio Ravera"},"description":"Raised in a family tradition of merchants, my entrepreneurial spirit drove me to launch my first e-commerce venture in 1998. My vision and dedication led, in 2002, to the founding of Artera, now a leading brand in premium managed cloud hosting services. As Chief Executive Officer, I lead DHH Switzerland SA, part of the international DHH S.p.A. group, listed on the Milan Stock Exchange with the reference code (AIM \u2013 ISIN: IT0005203622). It is under this brand that the Artera brand continues to grow and thrive. In addition to my commitment to the business world, I am an active researcher in the field of new technologies, always fascinated by cutting-edge innovations in the industry.","sameAs":["https:\/\/www.linkedin.com\/in\/sergioravera\/"],"url":"https:\/\/www.artera.net\/it\/author\/sergio-ravera\/"}]}},"_links":{"self":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/269","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/comments?post=269"}],"version-history":[{"count":4,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/269\/revisions"}],"predecessor-version":[{"id":216110,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/posts\/269\/revisions\/216110"}],"wp:attachment":[{"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/media?parent=269"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/categories?post=269"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.artera.net\/it\/wp-json\/wp\/v2\/tags?post=269"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}