Outils pour utilisateurs

Outils du site


webdev:html_css:ajout_dune_police

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision
Révision précédente
webdev:html_css:ajout_dune_police [03/12/2015 20:44] dolowebdev:html_css:ajout_dune_police [19/04/2019 20:50] (Version actuelle) dolo
Ligne 1: Ligne 1:
 +====== Ajout d'une police ======
 +
 +Convertisseur de police web :
 +FontSquirrel (vérifie si les polices sont libres) : [[http://www.fontsquirrel.com/tools/webfont-generator]]
 +Web Font Generator (pas de vérification) : [[https://www.web-font-generator.com/]]
 +
 +<Code:css>
 +@font-face {
 +    font-family: 'Gill Sans Std';
 +
 +    src: url('fonts/GillSansStd.eot'); /* IE9 Compat Modes */
 +    src: url('fonts/GillSansStd.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 +         url('fonts/GillSansStd.woff') format('woff'), /* Modern Browsers */
 +         url('fonts/GillSansStd.ttf' format('truetype'), /* Safari, Android, iOS */
 +         url('fonts/GillSansStd.svg#svgFontName') format('svg'); /* Legacy iOS */
 +
 +    font-weight: normal;
 +    font-style: normal;
 +}
 +
 +@font-face {
 +    font-family: 'Gill Sans Std';
 +
 +    src: url('fonts/GillSansStd-Bold.eot'); /* IE9 Compat Modes */
 +    src: url('fonts/GillSansStd-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 +         url('fonts/GillSansStd-Bold.woff') format('woff'), /* Modern Browsers */
 +         url('fonts/GillSansStd-Bold.ttf' format('truetype'), /* Safari, Android, iOS */
 +         url('fonts/GillSansStd-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */
 +
 +    font-weight: bold;
 +    font-style: normal;
 +}</Code>
 +
 +**Version de fontsquirrel :**
 +<Code:css>
 +@font-face {
 +    font-family: '8-bit_operatorregular';
 +    
 +    src: url('8bitoperatorplus-regular-webfont.eot');
 +    src: url('8bitoperatorplus-regular-webfont.eot?#iefix') format('embedded-opentype'),
 +         url('8bitoperatorplus-regular-webfont.woff2') format('woff2'),
 +         url('8bitoperatorplus-regular-webfont.woff') format('woff'),
 +         url('8bitoperatorplus-regular-webfont.ttf') format('truetype'),
 +         url('8bitoperatorplus-regular-webfont.svg#8-bit_operatorregular') format('svg');
 +  
 +    font-weight: normal;
 +    font-style: normal;
 +}
 +</Code>
 +
 +Favoriser les OpenType Fonts (OTF) plutôt que TrueType Fonts (TTF) ? [[https://stackoverflow.com/questions/3245141/using-otf-fonts-on-web-browsers|Stack]]
 +
 +-----------
 +===== Ajouter un contour en CSS =====
 +  * [[https://stackoverflow.com/questions/2570972/css-font-border]]
 +  * [[https://css-tricks.com/adding-stroke-to-web-text/]]
 +
 +Ça rend quand même dégueulasse et mauvaise compatibilité...
 +