Fontes et mise en page

Utiliser une Google Font[1]

  1. Sélectionner la famille, et les styles au sein de la famille
  2. Cocher <link>
  3. Copier le code généré dans le <head> de votre site, avant votre déclaration de feuille de style :
<head>
  …

  <!-- Google Font -->
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="style.css">
</head>
  1. Pour aller plus loin, ouvrir le lien vers la feuille de style générée par Google, et découvrir la propriété @font-face

Charger sa propre fonte en utilisant @font-face[2]

Pour charger et utiliser une fonte perso, il faut avant tout génerer les fichiers nécessaires, qui seront hébergés sur notre site de la même façon que les autres fichiers ressources (images, sons, etc…).

Les formats acceptés sont le ttf, otf, woff et woff2. Pour assurer la meilleure compatibilité possible tout en permettant aux navigateurs récent de charger des fichiers mieux optimisé (plus léger, plus rapide à décoder, etc…), il est d’usage de déclarer du woff2, woff et otf, dans cet ordre.

Pour déclarer la fonte, on rajoute un bloc @font-face spécial en haut de notre CSS, afin de lier la description visuel de la fonte et ses fichiers :

@font-face {
  font-family: 'MaFonte';
  font-weight: normal;
  font-style: normal;
  src: 
    url('fonts/ma-fonte.woff2') format('woff2'), 
    url('fonts/ma-fonte.woff') format('woff'),
    url('fonts/ma-fonte.otf') format('opentype');
}

@font-face {
  font-family: 'MaFonte';
  font-weight: 800;
  font-style: normal;
  src: 
    url('fonts/ma-fonte-black.woff2') format('woff2'), 
    url('fonts/ma-fonte-black.woff') format('woff'),
    url('fonts/ma-fonte-black.otf') format('opentype');
}

body {
  font-family: 'MaFonte';
}

strong {
  font-family: 'MaFonte';
  font-weight: 800;
}

La propriété position

Par défaut, un élément HTML se positionne automatiquement dans le flux de la page (de haut en bas). L’enchainement des éléments est déterminé par leur ordre dans la page HTML, et la seule possibilité de positionnement réside dans l’utilisation des propriétés de marge (margin) et de dimensions (width, height).

Il est possible de retirer un élément du flux de la page en utilisation la propriété CSS position.

position: absolute;

Un élément ayant comme propriété position: absolute, sort du flux de la page pour se positionner au-dessus des autres éléments. Il n’interfère plus avec le reste des éléments, il est en quelque sorte sur un « calque » séparé.

Il est possible de modifier la position d’un élément absolute en utilisant les propriétés top, right, bottom et `left.

Par exemple, pour positionner un div logo à 50px du coin haut gauche de ma page, je peux écrire :

.logo {
  position: absolute;
  top: 50px;
  left: 50px;
}

Par défaut, l’élément absolute se place en rapport à l’élément html. Il est possible de changer ce comportement en donnant la propriété position: relative; à l’un de ces ancêtres.

position: fixed;

Un élément ayant comme propriété position: fixed;, fonctionne comme un élément position: absolute;, mais est cette fois positionné par rapport au viewport (la fenêtre dans laquelle la page est affichée), et n’est donc pas affecté par le défilement.

Bonus : position: sticky;

Un hybride entre pas de position et une position: fixed;. Un élément en position: sticky; apparaît dans le flux de la page jusqu’à un seuil déterminé par sa popriété top, à partir duquel il devient fixed. Par exemple, les bandeaux de couleur sur chevalvert.fr.

z-index

Chaque élément qui sort du flux de la page (absolute, fixed, ou `sticky) occupe son propre calque, et n’intéragit plus avec les autres éléments de la page. Si vous commencez à avoir beaucoup d’éléments dans ce cas, il est possible que vous ayez besoin de contrôler quel élément passe par-dessus.

La propriété CSS z-index permet de contrôler l’ordre des calques de votre page : plus la valeur du z-index est grande, plus l’élément est « haut » sur la pile de calques, et plus il apparaîtra au-dessus des autres. Dans l’exemple ci-dessous, le div always-on-top passera par-dessus le logo.

.always-on-top {
   z-index: 999;
   …
}

.logo {
   z-index: 3;
   …
}

transform[3]

La propriété transform permet de manipuler l’aspect d’un élément de façon très dynamique (rotation, translation, etc…). Sa syntaxe est un peu particulière, puisqu’il faut enchaîner les fonctions de transformations à l’intérieur de sa valeur :

.cool-div {
  transform: rotate(…) translate(…) scale(…);
}

Voici la liste des fonctions disponibles :

fonction exemples
rotate rotate(45deg), rotate(0.5turn)
translate rotate(45deg), rotate(0.5turn)
skew skew(10deg), skew(10deg, 25deg)
scale scale(2), scale(1, 2)

Attention : appliquer une transformation à un élément ne le sort pas du flux de la page. Si vous faîtes un translate(1000px), l’élément sera visuellement décalé de 1000px mais la page se comportera comme s’il ne l’était pas.

  1. Google Font ↩︎

  2. @font-face, MDN ↩︎

  3. transform, MDN ↩︎