10
CSS3 Font Face Utiliser des polices de caractère non standard

CSS3 Font Face Utiliser des polices de caractère non standard

Embed Size (px)

Citation preview

Page 1: CSS3 Font Face Utiliser des polices de caractère non standard

CSS3 Font Face

Utiliser des polices de caractère non standard

Page 2: CSS3 Font Face Utiliser des polices de caractère non standard

L’attribut media avant CSS31. <!doctype html>

2. <head>

3. <meta charset="utf-8">

4. <title>Media Queries !</title>

5. <link rel="stylesheet" media="screen" href="screen.css" type="text/css" />

6. <link rel="stylesheet" media="print" href="print.css" type="text/css" />

7. </head>

8. <body> ... </body>

Page 3: CSS3 Font Face Utiliser des polices de caractère non standard

L’attribut media avant CSS31./* fichier: style.css */

2.body {

3.   color: red;

4.   font-size: 14px;

5.}

6. 

7.@media print {

8.  body {

9.    font-size: 18px;

10.    color: black;

11.  }

12.}

Page 4: CSS3 Font Face Utiliser des polices de caractère non standard

Ce qui change avec CSS3 Possibilité de ciblage étendues

Largeur et hauteur de l’appareil ou de la zone de visualisation width/height , device-width/device-height

Orientation (portrait, paysage) orientation, landscape / portrait

Résolution (en dpi par exemple) resolution

Ratio de l’appareil (16/9 , 4/3 par exemple) aspect-ratio

Page 5: CSS3 Font Face Utiliser des polices de caractère non standard

Ce qui change avec CSS3 Possibilité de mélanger plusieurs critères pour

un seul bloc en utilisant des opérateurs logiques (et, ou, non, uniquement)Par exemple:@media screen and (max-width:640px){

/* ici du css */}

Page 6: CSS3 Font Face Utiliser des polices de caractère non standard

Le problème du viewport sur mobile

Affichage avec le viewport par défaut

Page 8: CSS3 Font Face Utiliser des polices de caractère non standard

les points de rupture telephone

width < 768px tablette

width >= 768 et =< 992 ordi de bureau

width >= 992

Page 9: CSS3 Font Face Utiliser des polices de caractère non standard

les points de rupture1.@media screen and (max-width:768px){}

2.@media screen and(min-width: 768px) and (max-width: 992px){}

3.@media screen and (min-width: 992px){}

Page 10: CSS3 Font Face Utiliser des polices de caractère non standard

Exemples de sites http://3200tigres.wwf.fr/