28106 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Pour des raisons de performance, j'envisage du supprimer les google font actuellement utilisé.

Mais afin de ne pas tomber dans la typo standard, je me demande quelles sont les modification possible via css3

Finalement on as que?
font-stretch
font-style
font-weight
font-variant:

Et encore
Bonjour,
si on a bien compris, tu ne veux plus aller chercher les polices chez Google. Tu y vas, pour la dernière fois, tu choisis la police qui te plaît et tu la télécharge au format .eot, .woff2, .ttf. Certains préconisent aussi le format svg. Tu installes tout ça à la racine de ton site (ou ailleurs) et tu indiques le chemin comme ça :

@font-face {
    font-family: 'PolicePerso';
   src: url('Satisfy-Regular.eot') format('eot');
   src: url('Satisfy-Regular.woff2') format('woff2'),
        url('Satisfy-Regular.ttf') format('truetype');   
   }


Là, j'avais choisi la police "Satisfy-Regular" et je l'avais nommée "PolicePerso". ensuite, il suffit de l'appeler avec
font-family: 'PolicePerso'


Il y a des tas d'options dans l'utilisation de @font-face.
Merci pour vos réponse mais mon message ne devait pas être clair.

Je souhaite utiliser un police standard (sans font-face ou gg) et la modifier par css.
et la rendre visuellement différente de la police d'origine.
Modérateur
Salut,

gotcha5832 a écrit :
la modifier par css.
et la rendre visuellement différente de la police d'origine.

Heu et bien c'est comme dans un éditeur de texte, tu peu mettre en gras, souligner, espacer un peu les lettre voir étirer mais j'ai du mal à voir jusqu’où tu veux modifier la police... qu'est-ce que tu aimerais apporter comme changement ?
J'ai pas une idée précise.

Mais l'objectif serait d'utiliser une police standard (sans-serif), tout en la modifiant, afin de personnaliser et donnant du caractère au sites, mais sans que le visiteur se disent que le site est basique
Zut!!! le css ne fait pas le café… c'est pour ca que ce fait des années que je l'attends!

Plus sérieusement me demandais si il n'y avait pas des propriétés que je ne connaissais pas du type font-…

mais finalement
font-stretch
font-variant:
--> sont inutilisable
et font-weight existe de 100 à 900 mais ne sont supporté qu'en 2 valeurs (normal, bold)
Modérateur
Ouais...

font-style
font-variant
font-weight
font-size
line-height
font-family$
color
text-transform
text-decoration
letter-spacing
direction
word-spacing
text-shadow


+ quelques autres qui concerne les paragraphes. Mais bon en gros c'est ça quoi.

gotcha5832 a écrit :
Zut!!! le css ne fait pas le café… c'est pour ca que ce fait des années que je l'attends!
C'est bien dommage je suis d'accord, je vais monter une pétition pour CSS4 ! Smiley lol

gotcha5832 a écrit :
font-weight existe de 100 à 900 mais ne sont supporté qu'en 2 valeurs (normal, bold)
Ca c'est lié a la police je crois. En gros quand tu crée une police tu peux mettre une multitude de variante pour prévoir toutes ces étapes : https://fonts.google.com/specimen/Montserrat

Et du coup dans ta déclaration font-face tu peux coller chaque variante a une valeur :

100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)


Mais les polices de base n'ont défini que "bold" et "italic" (la plupart du temps) et du coup les fallback des valeurs correspondent simplement à regular et bold comme tu l'as vu.

Et si bold ne fait pas l'objet d'une police spéciale il me semble que c'est le navigateur qui la simule en forçant les contours (ca peut être crade du coup).
Modérateur
Ton rêve deviendra probablement bientôt bien plus disponible grâce au fontes variables.

C'est un vieux rêve de designer qu'on attends depuis des années: des police dont les dynamiques (graisses, chasse, etc.) sont dynamiques et vectorielles.

image: https://typekit.files.wordpress.com/2016/09/peace-type.gif?w=800&h=424

pour en savoir plus: https://blog.sevanova.com/cqfd/polices-variables-vers-nouvelle-ere-de-typo-web%E2%80%89/ par exemple

Si les polices le supportent depuis quelques années, le support arrive petit à petit dans nos navigateurs, mais c'est un peu tôt pour de la production (et les polices sont encore rares):

https://caniuse.com/#feat=variable-fonts

Voici un bac à sable pour tester:

https://www.axis-praxis.org
Modérateur
kustolovic a écrit :
Ton rêve deviendra probablement bientôt bien plus disponible grâce au fontes variables.
Ah merde... toujours pas de café... Smiley decu

Mais sinon c'est assez intéressant ! Merci Kusto !
Modérateur
Et.... un chocolat chaud c'est possible ? Smiley langue


Smiley fache Smiley fache Smiley fache Smiley fache fichu css...... Smiley bawling



Ne m'dites rien.... je connais la sortie Smiley lol


Bonn' zournée !