De meilleures polices Web avec @font-face
Depuis CSS2 nous pouvons profiter de @font-face et utiliser des types de polices personnalisés dans nos applications Web. Plutôt que d'être limité aux polices web par défaut nous pouvons maintenant utiliser notre propre famille de police et styler le web comment nous le voulons. Avec la simple inclusion de quelques paramètres CSS, la magie se produit:
balisage:
@font-face { font-family:'PacificoRegular'; src: url('Pacifico-webfont.eot'); src: url('Pacifico-webfont.eot?#iefix') format('embedded-opentype'), url('Pacifico-webfont.woff') format('woff'), url('Pacifico-webfont.ttf') format('truetype'), url('Pacifico-webfont.svg#PacificoRegular') format('svg'); font-weight: normal; font-style: normal; } h1,h2,h3,h4,h5,h6{ font-weight:normal; font-family:'PacificoRegular',Arial, sans-serif; }
Et vous pouvez transformer votre style de police depuis :
en quelque chose de plus élégant comme:
Utilisation des kits de polices FoontSquirrel @ dans les modèles basés sur YJSG
Comme vous pouvez le voir ci-dessus, le processus est simple mais au lieu de rechercher ou de créer des fichiers de polices Web, vous pouvez utiliser le service gratuit fourni par FoontSquirrel qui vous permettra de télécharger ou générer des kits @font-face et les utiliser tels quels dans votre template basé sur YJSG. Pour des fins de démonstration, veuillez aller à @font-face kit True Crimes cliquez sur @ font-face Kit au-dessus du spécimen et cliquez sur le gros bouton bleu qui dit Domwnoad @ font-face Kit.
site_racine/templates/yjsg_template_name/css/fontfacekits
. Si vous le faites sur un serveur en direct, téléchargez le fichier zip, extrayez-le dans son propre dossier et téléchargez ce dossier sur le chemin mentionné ci-dessus. Pour votre commodité, le template YouGrids est livré avec le kit PTSansNarrowBold @ font-face:Dézippez le fichier True-Crimes-fontfacekit.zip et envoyez le dossier contenant les polices (chaque exemple peut être différent) :
Accédez à votre gestionnaire de templates, nom de l'onglet Style et activez les paramètres suivants:
Utiliser la substitution de police de balises d'éléments réglé sur Oui
Type de substitution de la balise élément @font-face kit
À partir de @ font-face Kit Font-Family sélectionnez, choisissez votre nouveau dossier @ font-face kit qui, dans notre cas, est truecrimes_regular
Ajouter des déclarations de style personnalisées
Comme l'utilisation de @ font-face nécessite parfois de changer la taille de la police, le poids de la police ou d'autres attributs de police, nous avons désactivé Le paramètre Selecteurs concernés dans l'admin du template si vous sélectionnez @font-face kit en tant que type de substitution et vous devrez modifier vos déclarations dans site_racine/templates/yjsg_template_name/css/fontfacekits/votre_font_face_kit/stylesheet.css
file.
Assurez-vous que le fichier css de votre dossier @ font-face kit est toujours nommé stylesheet.css
et que vous n'avez pas d'espace dans votre nom de dossier @font-face kit.
Maintenant ouvrez le fichier stylsheet.css
et ajoutez ce code pour changer la famille de police pour les en-têtes, le titre de l'article, le titre du module et le nom du composant:
h1,h2,h3,h4,h5,h6,.article_title,.module_title,.pagetitle { font-weight:normal!important; font-family:'true_crimesregular', Arial, sans-serif; }
votre rendu devrait être ceci: