Changeset 108351 in spip-zone


Ignore:
Timestamp:
Jan 4, 2018, 11:51:23 AM (18 months ago)
Author:
arnaud.berard@…
Message:

la doc est déplacée dans le wiki contrib , on garde juste les todo et changelogs dans le fichier readme

File:
1 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/webfonts/branches/webfonts2/README.md

    r108240 r108351  
    11# WebFonts 2
    22
    3 Le chargement de webfonts peut impacter sur le rendu des pages,
    4 sur l'accessibilité au contenus, sur les performances de votre page.
    5 Il conviens donc d'en être conscient et de les utiliser en connaissance de cause.
    6 
    7 Outre les considérations d'ordre esthétique et typographique,
    8 il est recommandé de ne pas utiliser plus de deux ou trois variantes de fonts,
    9 afin de ne pas détériorer les performances de chargement de vos pages.
    10 
    11 Le plugin insert dans le head et en tête des autres styles
    12 les balise link ou style nécessaires. La requête vers google font pour l'insertion des polices ne nécessite pas d'accès a l'api, cependant pour pouvoir utiliser la recherche dans l'index GoogleFont, utiliser le sélecteur générique, un accès a l'API est nécessaire.
    13 
    14 ## Techniques de chargement de fonts :
    15 
    16 Les stratégies de chargement de font comparées par
    17 https://www.zachleat.com/web/comprehensive-webfonts/
    18 
    19 
    20 ### Google webfont :
    21 
    22 Utilisation du service google web font, via une requête.
    23 
    24 ### Css
    25 
    26 La rêgle css `@font-face` :
    27 https://developer.mozilla.org/fr/docs/Web/CSS/@font-face
    28 
    29 
    30 ```css
    31 /* latin */
    32 @font-face {
    33   font-family: 'Open Sans';
    34   font-style: italic;
    35   font-weight: 400;
    36   src: local('Open Sans Italic'), local('OpenSans-Italic'), url(https://fonts.gstatic.com/s/opensans/v15/xjAJXh38I15wypJXxuGMBogp9Q8gbYrhqGlRav_IXfk.woff2) format('woff2');
    37   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
    38 }
    39 ```
    40 
    41 
    42 
    43 ## Fonctionalités
    44 
    45 * insertion auto des polices ajoutées a la pipeline font_list ou depuis la configuration
    46 * Ajoute une pipeline pour que les plugins theme puisse activer leurs polices
    47 * Propose un sélecteur générique permettant de parcourir l'index GoogleFont (nécessite l'API key, selecteur_generique)
    48 * Propose une page permettant de parcourir la typothèque googleFont, avec filtrage, recherche, prévisualisation (nécessite l'API key).
    49 
    50 ## Configuration:
    51 
    52 ### GoogleFonts API Key
    53 
    54 Pour pouvoir afficher les fonts via l'api GoogleFont, il est nécessaire d'avoir
    55 préalablement récupéré une clef d'accès aux API Google et sélectionné GoogleFont dans les APIs interrogeables.
    56 
    57 Cette clef, peut être définie depuis un squelette ou un plugin, via un define.
    58 
    59 ```
    60 define('_GOOGLE_API_KEY', 'votre_clef_google_api');
    61 ```
    62 
    63 ou via la configuration du plugin.
    64 
    65 ### Méthode d'insertion
    66 
    67 Propose plusieurs techniques d'intégration/chargement de webfont
    68 
    69 * insertion standard via la balise `<link>`
    70 * insertion @import via une balise `<style>`
    71 
    72 ### Sélection des webfonts
    73 
    74 Un sélecteur générique permet de proposer les webfonts disponibles depuis le fichier index google_font
    75 la liste de webfont est généré sous la forme `family:variant,family2:variant3`,
    76 les fonts configurées sont ajoutées à la pipeline `font_list`.
    77 
    78 ### Liste des webfonts chargées
    79 
    80 La liste des webfonts chargées via la pipeline, avec possibilité de prévisualiser
    81 
    82 
    83 ## Pipeline font_list
    84 
    85 Description d'une font dans la font list :
    86 
    87 * family : Nom de la famille de police
    88 * variants : italic,bold
    89 * subsets : les subsets sont nécessaires uniquement pour les navigateurs ne supportant pas la propriété unicode-range,
    90 pour les autres les subsets sont ignorés, et le navigateur choisira ce qui est nécessaire dans le DOM.
    91 Explication sur les subsets : https://developers.google.com/fonts/docs/getting_started#Subsets
    92 Navigateurs supportant `unicode-range` : https://caniuse.com/#feat=font-unicode-range
    93 
    94 
    95 ### Depuis un squelette
    96 
    97 via le fichier `mes_options.php`
    98 
    99 ```php
    100 // Exemple d'ajout dans le pipeline "fonts_list" :
    101 $GLOBALS['spip_pipeline']['fonts_list'] .= "|skel_webfonts";
    102  
    103 function skel_webfonts($fonts) {
    104         $fonts = array(
    105                 '0'=> array(
    106                         'family'=> 'Open Sans',
    107                         'variants'=> array('300','300italic','regular','italic','600')
    108                 ),
    109                 '1'=> array(
    110                         'family'=> 'Montserrat',
    111                         'variants'=> array('regular','800')
    112                 )
    113         );
    114     return $fonts;
    115 }
    116 ```
    117 
    118 ### Depuis un plugin
    119 
    120 Utilisation de la pipeline `fonts_list()`.
    121 
    122 Ajouter au `paquet.xml`
    123 
    124 ```xml
    125 <pipeline nom="fonts_list" inclure="prefix_plugin_pipelines.php" />
    126 ```
    127 
    128 
    129 ```php
    130 
    131 function prefix_plugin_fonts_list($fonts){
    132         $fonts = array(
    133                 '0'=> array(
    134                         'family'=> 'Open Sans',
    135                         'variants'=> array('300','300italic','regular','italic','600'),
    136                         'subsets'=>array()
    137                 ),
    138                 '1'=> array(
    139                         'family'=> 'Roboto Condensed',
    140                         'variants'=> array('700','800'),
    141                         'subsets'=>array()
    142                 )
    143         );
    144        
    145         return $fonts;
    146 }
    147 ```
    148 
    149 
    150 
    151 ----
    152 
    153 
    154 
    155 
    156 ## Sources & Docs
    157 
    158 https://developers.google.com/fonts/docs/developer_api
    159 
    160 Article sur l'implémentation du webfont loader
    161 Présentation par cssTricks du webfontLoader :
    162 https://css-tricks.com/loading-web-fonts-with-the-web-font-loader/
    163 
    164 Google font : webfont loader https://github.com/typekit/webfontloader
    165 
    166 ZACH LEATHERMAN (Filament Group):
    167 webfont loading strategies : https://www.zachleat.com/web/comprehensive-webfonts/
    168 
    169 Etapes du chargement d'une font dans le navigateur :
    170 https://font-display.glitch.me/
    171 
    172 ### Des plugins spip ou techniques d'intégration d'utilisation de font/polices
    173 
    174 Plugin spip permettant d'utiliser les images typographiques via un modèle
    175 https://contrib.spip.net/Choix-Police-Typo
    176 
    177 Le filtre image_typo :
    178 
    179 https://www.spip.net/fr_article3325.html
    180 
    181 
    182 
    183 ### Typothèques
    184 
    185 https://fontlibrary.org/
    186 https://www.fontsquirrel.com/tools/webfont-generator
     3La documentation est cours de rédaction sur le wiki de spip-contrib :
     4https://contrib.spip.net/WebFonts-2
    1875
    1886
    1897## ToDo
    1908
    191 - GogleAPIKey : pour le listage et l'accès a la typthèque
    192 - TypeKit,… pour les autres fournisseurs de typo
    193 - Jeux de typo a charger et formats (woff, woff2), on génère la requète 
    194 depuis le html directement dans l'entête du site, pour éviter de maintenir un fichier css
    195 - Ajout du webfont loader développé par Google/TypeKit 
     9- [] La API key n'est pas prise en compte si elle est définie depuis la config
     10- [] vérifier que l'on inssère bien une seul fois la font:variant demandée
     11entre les polices ajoutées via la config et celles inssérées depuis un plugin
     12- [] GogleAPIKey : pour le listage et l'accès a la typthèque : conditionner l'affichage de l'onglet de recherche,
     13du bouton de génération de l'index
     14- [] Intégration du webfont loader
    19615https://github.com/typekit/webfontloader
     16        - [] TypeKit,… autres fournisseurs de typo
     17- [] Gestion des polices locales
     18- [] Associations Typos / Font pairing : proposer des associations de typos qui fonctionne bien ensemble
     19genre COmic Sans + Times
     20
    19721
    19822## Changelogs
Note: See TracChangeset for help on using the changeset viewer.