Comment trouver des polices russes dans les polices Google. Texte d'en-tête, où nous changeons rapidement la police. b) Appel de polices en utilisant CSS. Utilisation de @import

Qu’ont-ils en commun ? Propriété CSS @font-face Et GoogleWeb Polices?
@font-face vous permet d'utiliser vos propres polices (pas de polices sécurisées pour le Web) lors de l'affichage d'un site, Google nous fournit un outil pour une mise en œuvre rapide. Ce même Google a créé stockage de polices en ligne, afin que vous et moi puissions les utiliser dans nos travaux. Le plus important est que toutes les polices sont absolument gratuites et 100 % légales. Profit

Alors, comment ça marche ?

Nous choisissons le type de police dont nous avons besoin (je pense que le cyrillique et le latin seront pertinents ici. Ou y a-t-il des gens du Cambodge et de Grèce ?)

Je décrirai cependant le travail avec des polices contenant du cyrillique langue maternelle. Il n'y a que 8 polices cyrilliques dans le référentiel Google, très peu. Mais j’espère que des travaux dans ce sens sont en cours. Canonical (la société qui produit Ubuntu) a eu le plaisir de rendre la police propriétaire du système d'exploitation disponible gratuitement Ubuntu 10.10. L'Open Source, c'est bien.

Choisir police souhaitée du stockage Polices Google et lancez l'aperçu, vous pourrez y configurer les paramètres de la police sélectionnée (taille de la police, italique ou caractères gras) et recevez immédiatement le code de votre site Internet.

Nous sélectionnons les paramètres d'affichage dont nous avons besoin et déplaçons les curseurs. Sauf paramètres standards comme le soulignement et la transformation en majuscules et minuscules, vous pouvez ajouter une ombre au texte en choisissant parmi les 4 types les plus courants. Par Versions Google, naturellement. Par la suite, vous pouvez modifier le code et le faire selon vos besoins, mais l'option est certainement nécessaire. J'espère qu'ils ajouteront un paramètre d'ombre aux options avec plus de larges possibilités. C'est tout pour l'instant, mais merci pour ça.

Dans la fenêtre aperçu nous contrôlons le résultat obtenu.

Vous trouverez ci-dessous le code dont nous avons besoin pour le site. Il peut être utilisé avec quelques réserves. Par défaut, Google inclut tous les styles disponibles, ce qui est parfois inutile. Le code CSS peut également être nettoyé en supprimant les sélecteurs qui n'ont pas été configurés dans la fenêtre d'options.

Comme vous pouvez le voir, le sélecteur responsable de la police en CSS s'appelle font. Pour changer de taille CSS font, vous devez entrer font-size:15px et modifier le nombre de pixels à la valeur souhaitée. En CSS, une police grasse est indiquée par le sélecteur suivant : font-weight : bold et ainsi de suite.

Les styles requis et un exemple d'utilisation de la police pour les éléments de page peuvent être sélectionnés et consultés dans l'onglet « Utiliser cette police ».

C'est une chose très pratique API des polices Google, vous pouvez connecter la police en quelques minutes seulement, grand choix polices (pour l'alphabet latin le choix est vraiment impressionnant) et la rapidité de chargement de la police par le client est assurée par les serveurs de Google.

Et une dernière chose. N'importe quelle police pour les CSS de stockage en ligne Vous pouvez le télécharger sur votre ordinateur pour l'utiliser dans le système. Et c'est aussi parfait gratuitement, ils ne demanderont qu'un don, qui peut être de 0 $. Ici, tout est sur votre conscience, chacun décide lui-même de payer ou non.

J'espère que les informations ont été utiles et que vous avez appris quelque chose de nouveau

Commanditaire du matériel.
Climatiseurs dans la boutique en ligne http://www.technodom.kz/catalog/konditsionery. Climatiseurs - meilleurs produits, prêts, vaste choix, service impeccable.

Bonjour chers lecteurs. Vous rêvez probablement tous de rendre votre site Web ou celui de vos clients plus concis et plus attrayant.

L'un des principaux facteurs responsables de la perception des informations sur un site Web sont les polices et la manière dont nous les utilisons ensemble. Puisque sur un site, deux ou plusieurs types de polices sont le plus souvent utilisés, par exemple pour les titres et uniquement pour le texte principal.

L'une des possibilités d'améliorer visuellement la lisibilité des textes consiste à connecter des polices tierces. Après tout, tout le monde sait probablement à quel point collection standard Polices cyrilliques sous Windows, qui est responsable de l'affichage du texte dans le navigateur.

Polices standards :

Cufon et @font-face

J'ai déjà parlé de la manière dont vous pouvez connecter des polices non standard au site. Examinons maintenant une méthode plus simple : la règle @font-face en CSS et le chargement de la police elle-même à partir du stockage de polices Google Fonts.

Toute la différence entre Cufon et @font-face est que le premier utilise js pour émuler la police et dessine les caractères en utilisant ses propres moyens, tandis que @font-face charge la police elle-même sur l'ordinateur du visiteur et le navigateur l'utilise déjà pour afficher le texte. .

Dans tous les cas, Cufon et @font-face réduisent la vitesse de chargement du site, mais pas de manière significative.

Utiliser Google Fonts sur un site Web

Je ne décrirai pas grand chose et pendant longtemps, je donnerai exemple concret connecter Google Fonts, en utilisant l'exemple de ce blog.

Comme vous pouvez le constater, les titres et sous-titres de mes articles sont réalisés dans une police non standard, maintenant en pratique je vais vous montrer comment faire cela, et vous essayerez de même sur vos sites.

Sélection d'une police dans le référentiel

Pour que vous n'ayez pas peur, je vais vous expliquer - un référentiel est un référentiel, mais de manière bourgeoise :). Et donc, allons à http://www.google.com/fonts/ et recherchez une police qui vous convient :

Pas grand chose au menu :
Sur la gauche, comme vous pouvez le voir, il y a un bloc avec toutes sortes de filtres de recherche de polices, dans lequel vous pouvez sélectionner, par exemple, uniquement les polices latines ou cyrilliques. Et en plus, des paramètres d'affichage des exemples, qui sont répartis en 4 onglets :

• Mot— affichage de plusieurs lettres. Dans ce mode, il est pratique de comparer plusieurs polices à la fois et de voir à quoi ressemblent des caractères spécifiques ;
• Phrase— affichage sous la forme d'une phrase ;
• Paragraphe- sortir gros morceau texte, qui vous permettra de comparer clairement la police dans le texte lui-même ;
• Affiche— les titres sont affichés ; cette méthode de comparaison est pratique pour sélectionner la police à utiliser dans les titres.

Connecter la police au site

Après cela, dans le panneau Collection, situé en bas, accédez à l'onglet Utiliser, qui est responsable de l'utilisation des polices de votre collection. Ici, vous verrez immédiatement que Google indique à quel point la vitesse de chargement des pages va se détériorer :

Ci-dessous se trouve un panneau avec un choix de « type d'affichage », sélectionnez Latin (latin) et Cyrillique (cyrillique), ce qui nous donnera la possibilité d'afficher à la fois les lettres latines et cyrilliques :

Après cela, nous passons au troisième point de cette page, à savoir la connexion elle-même. Google nous propose trois options pour intégrer ses polices - via js, manière standard via une connexion à et @import dans le fichier CSS. J'utilise cette dernière méthode.

Ouvrez votre fichier CSS et écrivez la ligne que Google nous a fournie :

Ça y est, nous avons connecté la police de Google Fonts au site, maintenant comment l'utiliser ?

Utilisation en CSS

Tout est assez simple, après avoir connecté la police via @import , nous devons nous inscrire instructions standards pour les classes et identifiants pour lesquels notre nouvelle police. Par exemple:

h1, h2, h3 (famille de polices : « Cuprum », sans empattement ;)

Après toutes ces manipulations, vous verrez des en-têtes avec du nouveau, et non police standard.

C'est tout, merci de votre attention et à bientôt.

Il existe un moyen de connecter les polices Google Fonts pour un site Web à l'aide d'un service de Google lui-même. Dans cet article, nous examinerons tout dans l'ordre. Manière pratique, connectez l'une des polices proposées pour le site, le rendant ainsi encore plus attractif.

Comment connecter les polices Google Fonts

Google nous invite à utiliser son service d'ajout de polices. L'inconvénient est que ces polices elles-mêmes ne seront pas sur votre site Web (hébergement), elles seront constamment téléchargées et téléchargées. Si vous aimez vraiment l'une de ses collections de polices et que vous êtes prêt à connecter les polices Google à votre site, celle-ci est pour vous. Si vous n'avez pas peur d'une pression supplémentaire sur votre site, foncez.

Polices HTML sans services

Cette méthode est plus pratique et pour l'utiliser, vous n'avez pas besoin de charger votre site avec des services tels que Google. Tout sera stocké sur votre hébergement, il vous suffit d'abord de définir correctement les paramètres de police. Vous devez convertir, télécharger sur l'hébergement et ensuite seulement vous connecter police CSS au site.

La conversion doit être effectuée de manière à ce que tous les navigateurs la comprennent et la lisent correctement. Si tu sais Chinois et le langage des hiéroglyphes, bien sûr il n'y aura pas de problème, vous pouvez tout faire d'un coup... mais il vaut mieux tout faire correctement.

Il existe de nombreux services qui peuvent être utilisés pour convertir des polices, j'utilise le service fontsquirrel, webfont ou le programme fontoptimizer. Il ne sera pas difficile de les comprendre. Ouvrez le site Web fontsquirrel et accédez à la section GÉNÉRATEUR. Cliquez sur le bouton TÉLÉCHARGER LES POLICES. Sélectionnez le fichier avec la police que vous souhaitez convertir. Sélectionnez le mode EXPERT.

Un peu plus bas, dans l'élément Sous-ensemble, vous devez sélectionner Sous-ensemble personnalisé... Une liste de options possibles langues. Comme dans l'exemple avec l'ajout polices Google, vous devez choisir l'alphabet cyrillique de la même manière. Ensuite, tout en bas, nous sommes d'accord et cochons la case indiquant que nous ne violons rien et téléchargeons l'archive avec les polices prêtes à l'emploi.

L'archive contiendra quatre fichiers, nous en avons donc besoin. Extensions de fichiers (eot, svg, woff, ttf) Connectez-vous via Accès FTP sur votre site Web et copiez les quatre fichiers prêts à l'emploi dans le dossier sélectionné.

Les principales étapes sont toutes réalisées, il ne reste plus qu'à connecter la police CSS à la feuille de style. Ouvrez le fichier avec les styles (style.css) et collez-y le code suivant. Que faut-il y changer ! Dans mon exemple, j'ai précédemment utilisé la police Lobster, son nom doit donc être inséré au début et à la fin du code. Regardez le code ci-dessous et vous trouverez tout, cela ne devrait poser aucun problème.

@font-face ( font-family : "Lobster"; src: url("http://site/wp-admin/Fonts/Lobster-webfont.eot"); src: url("http://site/wp -admin/Fonts/Lobster-bold-webfont.eot?.woff") format("woff"), url("http://site/wp-admin/Fonts/Lobster-bold-webfont..svg#Lobster" ) format("svg"); poids de police : normal ; style de police : normal ;)

@font-face( police - famille : "Lobster" ; src :url ( "http://site/wp-admin/Fonts/Lobster-webfont.eot") ; src :url ( "http://site/wp-admin/Fonts/Lobster-bold-webfont.eot?#iefix") format ("embedded-opentype") , URL ( "http://site/wp-admin/Fonts/Lobster-bold-webfont.woff") format ("woff") ,

1. - le leader incontesté du classement. Contient ensemble complet 897 caractères. Possède d'excellentes caractéristiques, lisibles. Optimisé pour divers appareils. Son design est presque identique à celui du Droid Sans, à l'exception des caractères plus larges et de la présence d'italiques. Alors que Droid Sans est principalement utilisé dans les interfaces utilisateur de certains appareils Android.

2. - Le monde a vu pour la première fois cette police propre avec l'avènement de la salle d'opération Systèmes Android Sandwich à la crème glacée. Cette famille de polices comprend des styles réguliers et italiques, des largeurs fines, claires, régulières et condensées. Sa structure ressemble clairement à une police tout aussi célèbre Helvétique. Depuis le 15 mai 2013, cette police société Google a commencé à l'utiliser intensivement dans ses produits populaires tels que : Google+, Google Play, Google Maps.

3. - contient quatre options de style, ce qui ne l'empêche néanmoins pas d'occuper une position de leader en termes de popularité. L'impulsion pour le développement de cette police a été donnée par Rospechat, qui s'est fixé pour objectif de créer une police qui supporte tout diverses options Cyrillique, utilisé dans les langues des minorités nationales de Russie. La police PT Sans comprend Symbole du rouble russe.

4. - Le monde a vu pour la première fois cette police dans le cadre d'une salle d'opération Systèmes Ubuntu sa version est 10.10. Disponible en quatre versions : régulier, italique, gras, italique gras sur Anglais et en cyrillique. Depuis le 26 avril 2011, son utilisation est incluse dans Service Google Documents.

5. Arimo- cette police est incluse dans Chrome OS. Une autre alternative acceptable à Helvetica.

8. Cuprum- police universelle. C'est un grotesque rétréci. Disponible en quatre styles.

WebFonts est une technologie permettant d'utiliser des polices tierces sur votre page Web. Un exemple :

Si on recommence depuis le début, balise de police a été introduit en 1995, et déjà en 1996 il a été écrit définition du logiciel sur CSS. À partir de Versions CSS 2.0, le chargement et la synthèse de polices ont été introduits dans les navigateurs, mais néanmoins, l'IE alors populaire, mais désormais ancien et hors de propos, ne prenait pas en charge le chargement de polices, ce qui a entravé le développement rapide de l'utilisation des polices sur son site Web.

DANS Internet moderne Les polices Web sont une chose établie de longue date. Sur différents sites, nous pouvons utiliser différents types de polices, qui, à leur tour, ne sont pas incluses dans la livraison d'un système d'exploitation particulier, mais il existe un résultat indésirable. effet secondaire, dont nous parlerons aujourd'hui.

Formats de fichiers

Pour connecter les polices, une insertion logicielle dans CSS est utilisée, ce qu'on appelle la @-rule. Alors, dans forme la plus simple@font-face est une telle déclaration. Cela ressemble à ceci :

/* Déclarer la police */ @font-face ( font-family: "Font name"; src: url("path/to/it"); ) /* Appliquer la police */ p ( font-family: "Font nom", Arial)
TTF ou OTF - un fichier de police qui nous est familier, mais téléchargé depuis le serveur lors de la consultation du site ;

WOFF est une archive source OTF ou TTF non protégée, peut-être le format le plus important pris en charge par la plupart des gens. navigateurs populaires, et les fichiers dans WOFF sont généralement 2 à 2,5 fois plus légers que les fichiers originaux ;

EOT - une archive implémentée par TT OpenType qui dispose de mécanismes de sécurité, nécessaires pour prendre en charge les anciens navigateurs Internet Explorer(à partir d'IE8, en plus des courbes TrueType, PostScript est également pris en charge) ;

SVG - pour prendre en charge le navigateur Safari.

Aujourd'hui, les polices préparées pour être implémentées (@font-face) sur un site Web doivent être dans plusieurs formats à la fois. Vous avez réalisé qu'il existe des divergences, tout comme il existe plusieurs espèces systèmes d'exploitation. Il existe de nombreux formats de polices, mais un format spécifique ne fonctionnera que dans navigateur spécifique. Quant à ces mêmes formats, pourquoi tant d'entre eux doivent être spécifiés lors de la connexion, ils sont nécessaires à la prise en charge multi-navigateurs du site.

@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot? #iefix") format("embedded-opentype"), url("Font_file_name .woff") format("woff"), url("Font_file_name.ttf") format("truetype"), url("Font_file_name.svg#DSNoteRegular") format("svg"); police-poids : normal; police -style : normal)
Si vous souhaitez utiliser du code crypté à la place d'un fichier, dans ce cas, base64 nous vient en aide, qui fonctionne sur le même principe avec les images, mais pour l'ancien IE, base64 n'est pas traité.

@font-face ( font-family : "Font_name_any" ; src : url("Font_file_name.eot"); ) @font-face ( font-family : "Font_name_any"; src : url(data:font/woff;charset= utf-8;base64,DATA) format("woff"), url(data:font/truetype;charset=utf-8;base64,DATA) format("truetype"), url("Font_file_name.svg#Font_file_name") format("svg"); poids de police : normal ; style de police : normal );

OpenType intégré ?

Comme vous l'avez peut-être remarqué, les polices de plug-in pour IE ont une ligne avec le paramètre suivant :

Src : url("Font_file_name.eot?#iefix") format("embedded-opentype")
DANS version classique Nous aurions dû vous indiquer ceci :

Src : url("Font_file_name.eot") format("embedded-opentype")
Mais en ajoutant le "?" après le format de police, nous forçons le navigateur à ne pas lire l'instruction suivante - format("embedded-opentype"). Internet Explorer prend en charge l'intégration de polices via la norme propriétaire Embedded OpenType, à partir de la version IE 4.0. Il utilise une méthode de contrôle droits numériques pour empêcher la copie des polices distribuées sous licence.

Que faire si la police du navigateur n'est pas prise en charge ?

Il y a longtemps, des solutions de contournement, appelées « béquilles » pour afficher une police particulière, ont été inventées. Il existe des cas où la police a été conçue uniquement dans Format SVG, ou uniquement au format TTF.

1. Dans les temps anciens, les développeurs connectaient une image, qui à son tour était du texte saisi éditeur visuel. Cependant, cela est maintenant considéré comme une mauvaise forme, car la prise en charge est assez difficile (vous devez rouvrir l'éditeur pour modifier le texte de l'image), de sorte que l'utilisateur ne peut pas copier le texte de l'image.

2. L'utilisation de solutions flash était également courante.

3. Une autre solution est en utilisant Javascript pour remplacer le texte par VML (pour Internet Explorer) ou SVG (pour tous les autres navigateurs).

Quels autres problèmes pourraient survenir ?

Le navigateur tentera de synchroniser le chargement de la police, il tentera de masquer le texte, c'est-à-dire de le rendre invisible jusqu'à ce que la police soit chargée. Cet effet est appelé FOIT, l'effet « flash blanc ».

Effet flash

L'effet FOIT dans les navigateurs comme Safari, Chrome, Opera, Firefox a tendance à masquer le texte pendant 30 secondes maximum avant de refuser de recevoir la police, après quoi la police par défaut est définie.

Un exemple de la façon dont la police est chargée :

Pourtant, 2,7 secondes, c’est long !

Que peut-on faire ?

L'approche originale consistait à permettre la traduction de fichiers de polices en URI de données afin que ces polices puissent être incluses directement dans les définitions de familles de polices dans un fichier CSS. En téléchargeant ceci Fichier CSS De manière asynchrone, vous pouvez vous assurer que le navigateur restitue immédiatement le texte de la page à l'aide de polices personnalisées et que les nouvelles polices sont appliquées dès que le CSS est chargé.

Cependant, dans toute expérience, il y a un effet secondaire.

Initialement, Bram Stein utilisait une police personnalisée, mais après le chargement de sa police, un « scintillement » s'est produit, dans l'exemple à 0,7 seconde :

En bref, le scintillement se produit lorsque le navigateur tente de restituer la police de la famille de polices et de l'appliquer au code HTML. Une police définie dans la déclaration @font-face qui n'a pas encore été chargée.

Bram Stein a montré comment connecter correctement les polices, il a développé un script, une alternative de Google pour charger les polices de manière asynchrone, ce script est FontFaceObserver.

Essayons

Analyse

Connexion standard de Google

Pour être honnête, l'utilisation de plusieurs polices sur un site peut en fait ralentir la vitesse de chargement des pages du site, augmentant ainsi le temps de chargement global. L'API Google Fonts vous permet d'ajouter rapidement une police à un site Web à l'aide d'un générateur de polices, concevant ainsi rapidement votre site Web. Cependant, vous devez être conscient de l’effet FOIT. Durée totale chargement - 322 ms.

Chargeur de polices Web de Google

Chargeur de polices Web - Bibliothèque JavaScript pour un travail avancé avec l'API, une bibliothèque qui nous donne plus de contrôle sur le chargement des polices que API standard Polices Google. Le script nous permet d'utiliser de nombreuses polices, en les chargeant de manière séquentielle ou asynchrone. Contrairement à connexion standard, sur les connexions faibles, le texte est affiché dans la police standard jusqu'à ce que la police soit chargée.
Temps de chargement total : 1132 ms

FontFaceObserver

FontFaceObserver est une bibliothèque JavaScript (5 Ko), un soi-disant chargeur compatible avec n'importe quel service de polices Web. Le script nous permet de nous informer si la police est chargée ou non, nous permet de suivre l'événement après le chargement et avant le chargement de la police. Temps de chargement total : 159 ms

Utiliser un script.