{"id":103,"date":"2009-05-03T12:43:01","date_gmt":"2009-05-03T10:43:01","guid":{"rendered":"http:\/\/blog.kodono.info\/wordpress\/?p=103"},"modified":"2009-05-02T12:48:47","modified_gmt":"2009-05-02T10:48:47","slug":"adapter-la-taille-des-polices-de-caracteres-selon-les-navigateurs-web-design","status":"publish","type":"post","link":"https:\/\/blog.kodono.info\/wordpress\/2009\/05\/03\/adapter-la-taille-des-polices-de-caracteres-selon-les-navigateurs-web-design\/","title":{"rendered":"Adapter la taille des polices de caract\u00e8res selon les navigateurs [Web Design]"},"content":{"rendered":"<p>[niveau: expert]<\/p>\n<p>OpenWeb propose un excellent article nomm\u00e9 <a href=\"http:\/\/openweb.eu.org\/articles\/compatibilite_taille_polices\/\">\u00ab Compatibilit\u00e9 multi-navigateurs des polices de caract\u00e8res \u00bb<\/a> o\u00f9 ils y expliquent les unit\u00e9s et les valeurs \u00e0 utiliser pour dimensionner la taille des caract\u00e8res de fa\u00e7on homog\u00e8ne sur le plus grand nombre possible de navigateurs Web.<\/p>\n<p>Pour r\u00e9sumer, il est conseill\u00e9 de ne pas utiliser une unit\u00e9 absolue (comme le &#8216;px&#8217;, le &#8216;pt&#8217;, le &#8216;cm&#8217;, etc). <strong>Evitez<\/strong> donc de noter dans votre style CSS quelque chose comme:<\/p>\n<div class=\"code\">\n<pre class=\"css\">body {\u00a0font-size: 15px; } \/* d\u00e9fini la taille par d\u00e9faut de tout le texte *\/<\/code><\/div>\n<p>A cela, <strong>pr\u00e9f\u00e9rez<\/strong> des unit\u00e9s relatives, et en l'occurrence l'utilisation de 'em' et de '%'.<br \/>\nIl suffit de d\u00e9finir la taille du texte par d\u00e9faut en '%' au niveau du body, et d'utiliser 'em' au niveau du reste de vos conteneurs.<\/p>\n<p>Mais comment savoir l'\u00e9quivalent entre le % et le 'px' ? Pour cela <a href=\"http:\/\/openweb.eu.org\/articles\/compatibilite_taille_polices\/\">OpenWeb<\/a> nous propose un tableau d'\u00e9quivalence :<\/p>\n<table id=\"valeurs\">\n<thead>\n<tr>\n<th>Valeurs en %<\/th>\n<th>Valeurs \u00e9quivalentes en 'px'<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>57<\/td>\n<td>9<\/td>\n<\/tr>\n<tr>\n<td>65<\/td>\n<td>10<\/td>\n<\/tr>\n<tr>\n<td>71<\/td>\n<td>11<\/td>\n<\/tr>\n<tr>\n<td>77<\/td>\n<td>12<\/td>\n<\/tr>\n<tr>\n<td>82<\/td>\n<td>13<\/td>\n<\/tr>\n<tr>\n<td>88<\/td>\n<td>14<\/td>\n<\/tr>\n<tr>\n<td>96<\/td>\n<td>15<\/td>\n<\/tr>\n<tr>\n<td>103<\/td>\n<td>16<\/td>\n<\/tr>\n<tr>\n<td>109<\/td>\n<td>17<\/td>\n<\/tr>\n<tr>\n<td>115<\/td>\n<td>18<\/td>\n<\/tr>\n<tr>\n<td>121<\/td>\n<td>19<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<style type=\"text\/css\">\n#valeurs, #valeurs td, #valeurs th { border: 1px solid black; border-collapse:collapse; text-align: center; }\n#valeurs th { background-color:lightgray; padding:5px; }\n<\/style>\n<p>Ainsi, notre CSS donnera :<\/p>\n<div class=\"code\">\n<pre class=\"css\">body { font-size: 96%; } \/* \u00e9quivaut \u00e0 15px *\/<\/code><\/div>\n<p>Gr\u00e2ce \u00e0 cette m\u00e9thode, votre texte s'adaptera tr\u00e8s bien quelque soit le navigateur et la taille de l'\u00e9cran de vos lecteurs.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>[niveau: expert] OpenWeb propose un excellent article nomm\u00e9 \u00ab Compatibilit\u00e9 multi-navigateurs des polices de caract\u00e8res \u00bb o\u00f9 ils y expliquent les unit\u00e9s et les valeurs \u00e0 utiliser pour dimensionner la taille des caract\u00e8res de fa\u00e7on homog\u00e8ne sur le plus grand nombre possible de navigateurs Web. Pour r\u00e9sumer, il est conseill\u00e9 de ne pas utiliser une [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_coblocks_attr":"","_coblocks_dimensions":"","_coblocks_responsive_height":"","_coblocks_accordion_ie_support":"","hide_page_title":"","footnotes":""},"categories":[20,26],"tags":[30,155,157],"class_list":["post-103","post","type-post","status-publish","format-standard","hentry","category-niveau-expert","category-web-design","tag-css","tag-niveau-expert","tag-web-design"],"_links":{"self":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/103","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/comments?post=103"}],"version-history":[{"count":14,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/103\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/posts\/103\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/media?parent=103"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/categories?post=103"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.kodono.info\/wordpress\/wp-json\/wp\/v2\/tags?post=103"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}