1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[5744],{69924:(e,s,n)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/blog/police-css3-font-face-google-font",function(){return n(46580)}])},46833:(e,s,n)=>{"use strict";n.d(s,{A:()=>l});var t=n(74848),i=n(21055),r=n(53924);let l=e=>{let{src:s,alt:n,...l}=e;return(0,t.jsx)(i.E9,{src:s,alt:n,center:!0,my:r.vU,...l})}},32526:(e,s,n)=>{"use strict";n.d(s,{A:()=>r});var t=n(74848),i=n(21055);let r=e=>{let{year:s,lang:n="fr"}=e;return(0,t.jsx)(i.nC,{className:"deprecation-warning",textAlign:"center",children:(0,t.jsx)("p",{children:"fr"===n?(0,t.jsxs)(t.Fragment,{children:["Cet article a \xe9t\xe9 \xe9crit en ",(0,t.jsx)("strong",{children:s})," et peut contenir des informations obsol\xe8tes !"]}):(0,t.jsxs)(t.Fragment,{children:["This article was written in ",(0,t.jsx)("strong",{children:s})," and may contain outdated information!"]})})})}},85039:(e,s,n)=>{"use strict";n.d(s,{A:()=>r});var t=n(74848),i=n(21055);let r=e=>{let{children:s}=e;return(0,t.jsx)("aside",{children:(0,t.jsx)(i.P,{textAlign:"center",children:(0,t.jsxs)("em",{children:["â",s,"â"]})})})}},46580:(e,s,n)=>{"use strict";n.r(s),n.d(s,{default:()=>f});var t=n(74848),i=n(46833),r=n(77083),l=n(1),a=n(32526),o=n(85039),u=n(21055),c=n(85044);let d={src:"https://cdn.v1v2.io/_next/static/media/font-face.6ed11fe7.png",height:43,width:291,blurDataURL:"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAADFBMVEU2msg5nMg3mMQylsOY3ejRAAAABHRSTlN8kW84pMxkjwAAAAlwS
1FlzAAALEwAACxMBAJqcGAAAABFJREFUeJxjYGJgZGBmYGQCAAAvAApYBmRTAAAAAElFTkSuQmCC",blurWidth:8,blurHeight:1};var p=n(53924);let m=()=>(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)("header",{children:[(0,t.jsx)(c.A,{mb:p.vU,children:"Une police personnalis\xe9e CSS3 avec @font-face ou Google Font"}),(0,t.jsx)(i.A,{src:d,alt:"Police personnalis\xe9e avec font-face",imageProps:{priority:!0},mb:p.rf}),(0,t.jsx)(a.A,{year:2010}),(0,t.jsxs)("p",{children:["L'utilisation de polices personnalis\xe9es a toujours \xe9t\xe9 un probl\xe8me pour les d\xe9veloppeurs. Une image de texte est affich\xe9e correctement par tous les navigateurs, tandis q'un vrai texte peut \xeatre r\xe9f\xe9renc\xe9 et s\xe9lectionn\xe9. Il est \xe0 pr\xe9sent possible gr\xe2ce \xe0 la propri\xe9t\xe9"," ",(0,t.jsx)(u.Cy,{children:"@font-face"})," d'embarquer des polices sur son site, et que celles-ci s'affichent correctement m\xeame si l'utilisateur n'a pas la police install\xe9e."]}),(0,t.jsxs)("p",{children:["Avant toute chose il est important de savoir quels navigateurs impl\xe9mentent la fonctionnalit\xe9 ",(0,t.jsx)(u.Cy,{children:"@font-face"}),"..."]}),(0,t.jsx)(o.A,{children:"A tous les coups \xe7a ne va pas marcher sur Internet Explorer !"}
1),(0,t.jsxs)("p",{children:["Eh bien si ! Internet Explorer reconnait la propri\xe9t\xe9 ",(0,t.jsx)(u.Cy,{children:"@font-face"})," ! Mais attendez une seconde... Vous vous doutez bien que ce serait un peu trop simple qu'IE respecte les standards comme tout le monde. Effectivement, il y a quand m\xeame un hic, c'est qu'IE ne sait interpr\xe9ter que son propre format de police, qui lui, n'est pas du tout standard... Mais rassurez-vous, \xe0 la fin de ce tutoriel, vous aurez une belle police sur tous les navigateurs !"]})]}),(0,t.jsxs)("section",{children:[(0,t.jsx)(u.H2,{children:"Le @font-face simple"}),(0,t.jsxs)("p",{children:["Commen\xe7ons tout d'abord par le cas simple qui fonctionnera correctement sur tous les navigateurs modernes. L'application d'une police personnalis\xe9e passe tout d'abord par le chargement de celle-ci dans le navigateur du client. C'est justement ce que fait la propri\xe9t\xe9 CSS3 ",(0,t.jsx)(u.Cy,{children:"@font-face"}),". Voici un exemple de son utilisation :"]}),(0,t.jsx)(l.A,{children:"@font-face {\n font-family: 'Plume';\n src: url('PlumBAE.ttf');\n}"}),(0,t.jsxs)("p",{children:["Ce bout de code un peu particulier ne sert pas \xe0 appliquer un style \xe0 un \xe9l\xe9ment, mais \xe0 d\xe9clarer une police. L'attribut ",(0,t.jsx)(u.Cy,{children:"font-family"})," correspond au nom que l'on va assigner \xe0 cette police, afin de l'appliquer ensuite sur des \xe9l\xe9ments. L'attribut"," ",(0,t.jsx)(u.Cy,{children:"src"})," indique tout simplement le chemin vers le fichier de police (.ttf ou .otf). Une fois la police d\xe9clar\xe9e, elle est utilisable comme n'importe quelle autre police :"]}),(0,t.jsx)(l.A,{children:"#plume {\n font-family: 'Plume', Georgia, serif;\n}"}),(0,t.jsx)("p",{children:"Et c'est tout ! Ces quelques lignes de code suffisent \xe0 faire fonctionner votre police sur les versions r\xe9centes de Firefox, Chrome, Safari et Opera. Maintenant il va falloir s'attaquer au rebelle du lot."})]}),(0,t.jsxs)("section",{children:[(0,t.jsx)(u.H2,{children:"@font-face ultra compatible"}),(0,t.jsx)("p",{children:"Internet Explorer utilise le format de police .eot (Embedded OpenType) plut\xf4t que les .ttf (TrueType) ou .otf (OpenType). Par cons\xe9quent, il va falloir feinter pour rediriger IE vers un fichier .eot et les autres navigateurs vers le .ttf ou .otf."}),(0,t.jsxs)("p",{children:["Il existe de nombreuses m\xe9thodes permettant de le faire, qui sont d\xe9taill\xe9es sur cet"," ",(0,t.jsx)(u.A,{isExternal:!0,href:"http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/",children:"article de Paul Irish"}),". En r\xe9alit\xe9, une technique a \xe9t\xe9 commun\xe9ment admise comme \xe9tant la plus pertinente, et c'est uniquement celle-ci que nous allons voir maintenant."]}),(0,t.jsxs)("p",{children:["Parmi les attributs que l'on peut ajouter \xe0 notre d\xe9claration de police"," ",(0,t.jsx)(u.Cy,{children:"@font-face"}),", il existe l'attribut ",(0,t.jsx)(u.Cy,{children:'local("NomDePolice")'})," qui peut \xeatre utilis\xe9 pour prioriser une version locale de la police recherch\xe9e si elle est pr\xe9sente sur l'ordinateur du client, ainsi que l'attribut ",(0,t.jsx)(u.Cy,{children:'format("FormatDePolice")'}),", qui sert \xe0 pr\xe9ciser le format de police utilis\xe9."]}),(0,t.jsx)("p",{children:"Internet Explorer ne connait aucun de ces 2 attributs et c'est cette faille qui va nous servir \xe0 le d\xe9tecter efficacement gr\xe2ce au code suivant :"}),(0,t.jsx)(l.A,{children:"@font-face {\n font-family: 'Graublau Web';\n src: url('GraublauWeb.eot');\n src: local('x'),\n url('GraublauWeb.ttf') format('TrueType');\n}"}),(0,t.jsx)(o.A,{children:"Oula, \xe7a y est, je ne comprends plus rien !"}),(0,t.jsxs)("p",{children:["Un peu d'explications ne sont pas de refus : Ici, Internet Explorer comprendra l'instruction src : ",(0,t.jsx)(u.Cy,{children:"url('GraublauWeb.eot')"})," mais s'arr\xeatera sur le ",(0,t.jsx)(u.Cy,{children:"local('x')"})," ","qu'il n'arrivera pas \xe0 lire. La valeur contenue dans ",(0,t.jsx)(u.Cy,{children:"local()"}),' a pour seul condition de ne pas \xeatre une police existante, donc vous pouvez par exemple y mettre un simple caract\xe8re. D\'ailleurs, un caract\xe8re de smiley y est souvent plac\xe9 car il est consid\xe9r\xe9 comme la "marque de fabrique" de cette m\xe9thode, et vous le retrouverez un peu partout.']}),(0,t.jsxs)("p",{children:["Les autres navigateurs consid\xe9reront la d\xe9finition de police suivante qui est la version TrueType universelle, en ignorant \xe9galement le ",(0,t.jsx)(u.Cy,{children:"local('x')"}),", qui ne correspond vraisemblablement pas \xe0 un nom de police existant localement sur le client... Et voil\xe0 ! Cet extrait de code suffit \xe0 faire fonctionner le capricieux Internet Explorer !"]}),(0,t.jsx)("p",{children:"Un dernier point cependant, certaines anciennes versions de Chrome ne supportent qu'un r\xe9cent format sp\xe9cifique, le .woff ainsi que les polices SVG."}),(0,t.jsx)("p",{children:"Une adaptation du code pr\xe9c\xe9dent permet de le rendre encore plus universel, en g\xe9rant ces 2 cas suppl\xe9mentaires :"}),(0,t.jsx)(l.A,{children:"@font-face {\n font-family: 'Graublau Web';\n src: url('GraublauWeb.eot');\n src: local('x'),\n url('GraublauWeb.woff') format('woff'),\n url('GraublauWeb.otf') format('opentype'),\n url('GraublauWeb.svg#grablau') format('svg');\n}"}),(0,t.jsx)("p",{children:"Cette technique suit le m\xeame sch\xe9ma que la pr\xe9c\xe9dente."}),(0,t.jsxs)("p",{children:["Vous reconnaitrez qu'il est assez fastidieux de devoir g\xe9rer tous ces cas et tous ces formats \xe0 la main, ce qui passe d'ailleurs par une phase de conversion de formats. Heureusement pour nous, il existe des outils qui font tout le travail \xe0 notre place, et un en particulier : le"," ",(0,t.jsx)(u.A,{isExternal:!0,href:"http://www.fontsquirrel.com/fontface/generator",children:"@Font-face Generator de Font Squirrel"}),"."]}),(0,t.jsx)("p",{children:"Il suffit d'uploader une police (attention \xe0 bien respecter les droits d'auteur li\xe9s aux police
1s que vous utilisez), et Font Squirrel se charge de vous fournir un \"kit\" contenant tous les formats convertis de votre police ainsi que des fichiers HTML et CSS de d\xe9mo pour que vous n'ayez plus qu'\xe0 faire un copier-coller vers votre site ! Ceux qui auront la curiosit\xe9 d'activer le mode \"Expert\" verront d'ailleurs que c'est la m\xe9thode du \"smiley\" qui est \xe9galement utilis\xe9e par ce g\xe9n\xe9rateur."}),(0,t.jsx)(o.A,{children:"Tu n'aurais pas pu commencer par \xe7a plut\xf4t que de tout d\xe9tailler ?"}),(0,t.jsx)("p",{children:"Haha effectivement ! Mais reconnaissez que comme \xe7a, vous comprenez bien le fonctionnement de ces kits !"}),(0,t.jsx)("p",{children:"Passons maintenant \xe0 une m\xe9thode alternative tr\xe8s int\xe9ressante : les Google Fonts."})]}),(0,t.jsxs)("section",{children:[(0,t.jsx)(u.H2,{children:"Les Web Fonts avec Google Font"}),(0,t.jsxs)("p",{children:["Il existe un autre moyen d'utiliser des polices exotiques sur une page web sans avoir \xe0 s'occuper de ",(0,t.jsx)(u.Cy,{children:"@font-face"}),". Il existe des services qui fournissent des polices \xe0 int\xe9grer directement dans son CSS depuis une URL distante. Les polices propos\xe9es sont en g\xe9n\xe9ral adapt\xe9es \xe0 l'affichage dans un navigateur, s'afficheront correctement sur la majorit\xe9 des navigateurs, et enfin le service se chargera de fournir la police \xe0 l'utilisateur, ce qui peut s'av\xe9rer non n\xe9gligeable \xe9tant donn\xe9 que la plupart des polices font entre 50ko et 300ko !"]}),(0,t.jsx)("p",{children:"Nous allons dans cet article nous int\xe9resser particuli\xe8rement au service Google Font. Ce service gratuit est constitu\xe9 de la Google Font API et du Google Font Directory."})]}),(0,t.jsxs)("section",{children:[(0,t.jsx)(u.H2,{children:"Google Font API"}),(0,t.jsx)("p",{children:"L'API de Google Font est tr\xe8s facile \xe0 manipuler. Il suffit simplement d'ajouter une feuille de style \xe0 votre page HTML afin d'obtenir la nouvelle police. L'exemple officiel qui suit illustre bien le concept :"}),(0,t.jsx)(l.A,{lang:"html",children:'<html>\n <head>\n <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">\n <style>\n body {\n font-family: \'Tangerine\', serif;\n font-size: 48px;\n }\n </style>\n </head>\n <body>\n <h1>Making the Web Beautiful!</h1>\n </body>\n</html>'}),(0,t.jsxs)(u.nz,{children:["Ici, il n'y a donc pas de ",(0,t.jsx)(u.Cy,{children:"@font-face"})," \xe0 \xe9crire. Tout est g\xe9r\xe9 dans la feuille de style h\xe9berg\xe9e chez Google, qui va effectuer tous les traitements de son c\xf4t\xe9 afin d'assurer l'affichage correct de la police. L'utilisation de l'API se r\xe9sume donc \xe0 :"]}),(0,t.jsxs)(u.uQ,{children:[(0,t.jsx)("li",{children:"Inclure la police qui nous int\xe9resse,"}),(0,t.jsxs)("li",{children:["L'appliquer \xe0 une classe CSS avec ",(0,t.jsx)(u.Cy,{children:"font-family"}),"."]})]}),(0,t.jsx)("p",{children:"Simple non ?"}),(0,t.jsxs)("p",{children:["Pour ceux qui se poseraient tout de m\xeame la question de ce qui se passe dans cette fameuse feuille de style CSS, Google analyse quel navigateur est utilis\xe9 par l'utilisateur, et renvoie le code CSS qui fonctionne le mieux pour ce navigateur. Et ce code CSS est compos\xe9 d'un simple ",(0,t.jsx)(u.Cy,{children:"@font-face"})," !"]})]}),(0,t.jsxs)("section",{children:[(0,t.jsx)(u.H2,{children:"Le fallback et les polices alternatives"}),(0,t.jsxs)("p",{children:["Il est important de pr\xe9ciser au moins une police alternative standard au cas o\xf9 pour une quelconque raison, la police n'ait pas \xe9t\xe9 charg\xe9e correctement. Ainsi, il faut au minimum ajouter \xe0 notre propri\xe9t\xe9 ",(0,t.jsx)(u.Cy,{children:"font-family"})," la valeur ",(0,t.jsx)(u.Cy,{children:"serif"})," ou"," ",(0,t.jsx)(u.Cy,{children:"sans-serif"})," apr\xe8s notre web font :"]}),(0,t.jsx)(l.A,{lang:"css",children:"font-family: 'Tangerine', serif;"}),(0,t.jsxs)("p",{children:["Profitons-en pour rappeler qu'une police serif poss\xe8de des \"",(0,t.jsx)(u.A,{isExternal:!0,href:"http://fr.wikipedia.org/wiki/Empattement_(typographie)",children:"empattements"}),"\" (petites extensions au bout des lettres repr\xe9sentant l'\xe9criture manuscrite), comme la police Times New Roman, et qu'une police sans-serif ne poss\xe8dera pas d'empattements, comme la police Arial."]}),(0,t.jsxs)("p",{children:["Tout comme l'usage habituel de la propri\xe9t\xe9 ",(0,t.jsx)(u.Cy,{children:"font-family"}),", il est bien entendu possible d'ajouter autant de polices alternatives qu'on le souhaite :"]}),(0,t.jsx)(l.A,{lang:"css",children:"font-family: 'Tangerine', Calibri, Georgia, serif;"}),(0,t.jsxs)("p",{children:["Le navigateur tentera d'afficher la premi\xe8re police, puis si elle est indisponible, passera \xe0 la suivante... jusqu'\xe0 atteindre ",(0,t.jsx)(u.Cy,{children:"serif"})," ou ",(0,t.jsx)(u.Cy,{children:"sans-serif"}),"."]})]}),(0,t.jsxs)("section",{children:[(0,t.jsx)(u.H2,{children:"Construire l'URL de la feuille de style"}),(0,t.jsx)("p",{children:"L'URL du CSS de l'API Google Font \xe0 inclure est bas\xe9e sur les r\xe8gles suivantes. L'URL commence toujours par :"}),(0,t.jsx)(l.A,{lang:"sh",children:"http://fonts.googleapis.com/css?family="}),(0,t.jsxs)("p",{children:["On y ajoute ensuite les noms des polices \xe0 inclure, en utilisant le symbole ",(0,t.jsx)(u.Cy,{children:"+"})," \xe0 la place des espaces, et en s\xe9parant chaque police par un ",(0,t.jsx)(u.Cy,{children:"|"})," :"]}),(0,t.jsx)(l.A,{lang:"sh",children:"http://fonts.googleapis.com/css?family=Tangerine|Inconsolata|Droid+Sans"}),(0,t.jsx)("p",{children:"Il vaut mieux utiliser cette m\xe9thode pour r\xe9cup\xe9rer plusieurs polices plut\xf4t que d'inclure une nouvelle CSS, ce qui consommerait une requ\xeate HTTP suppl\xe9mentaire."}),(0,t.jsxs)("p",{children:["Enfin, il est possible de sp\xe9cifier si l'on souhaite une police en italique ou en gras en ajoutant des valeurs apr\xe8s le nom de la police suivi par le caract\xe8re ",(0,t.jsx)(u.Cy,{children:":"}),"."]}),(0,t.jsx)(u.nz,{children:"Voici les diff\xe9rentes valeurs possibles :"}),(0,t.jsxs)(u.uQ,{children:[(0,t.jsxs)("li",{children:["Italique : ",(0,t.jsx)(u.Cy,{children:"italic"})," ou ",(0,t.jsx)(u.Cy,{children:"i"})]}),(0,t.jsxs)("li",{children:["Gras : ",(0,t.jsx)(u.Cy,{children:"bold"}),", ",(0,t.jsx)(u.Cy,{children:"b"})," ou le poids de la lettre, ",(0,t.jsx)(u.Cy,{children:"700"})," par exemple"]}),(0,t.jsxs)("li",{children:["Gras italique : ",(0,t.jsx)(u.Cy,{children:"bolditalic"})," ou ",(0,t.jsx)(u.Cy,{children:"bi"})]})]}),(0,t.jsx)("p",{children:"Comme le montrent ces exemples :"}),(0,t.jsx)(l.A,{lang:"sh",children:"http://fonts.googleapis.com/css?family=Cantarell:italic|Droid+Serif:bold\nhttp://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:b\nhttp://fonts.googleapis.com/css?family=Cantarell:i|Droid+Serif:700"}),(0,t.jsxs)("p",{children:["Enfin un param\xe8tre ",(0,t.jsx)(u.Cy,{children:"subset"})," sert \xe0 indiquer le type d'alphabet \xe0 utiliser pour une police (Cyrillique ou Latin par exemple) et s'\xe9crit de la mani\xe8re suivante :"]}),(0,t.jsx)(l.A,{lang:"sh",children:"http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic"})]}),(0,t.jsxs)("section",{children:[(0,t.jsx)(u.H2,{children:"Google Font Directory"}),(0,t.jsxs)("p",{children:["L'ensemble des polices utilisables par l'API Google Font se trouve sur"," ",(0,t.jsx)(u.A,{isExternal:!0,href:"https://fonts.google.com/",children:"Google Fonts"}),". Chacune police poss\xe8de une page affichant les d\xe9tails de la police ainsi qu'un c\xe9l\xe8bre \"The quick brown fox jumps over the lazy dog\" contenant les 26 lettres de l'alphabet latin. Une page de pr\xe9visualisation est \xe9galement disponible, ainsi qu'une section \"Get the code\" qui vous fournira directement l'adresse de la feuille CSS \xe0 inclure."]}),(0,t.jsx)("p",{children:'Pour ceux qui souhaitent aller plus loin, vou
1s pouvez consulter en anglais les consid\xe9rations techniques, la documentation de l\'API pour les d\xe9veloppeurs, et utiliser les "Advanced techniques" pr\xe9sentes sur les pages "Get the code" afin d\'am\xe9liorer le chargement des polices.'})]}),(0,t.jsxs)("section",{children:[(0,t.jsx)(u.H2,{children:"Code complet de d\xe9monstration"}),(0,t.jsxs)("p",{children:["Voici le code d'une d\xe9monstration qui affiche deux paragraphes dot\xe9s chacun d'une police personnalis\xe9e. Le premier paragraphe utilise ",(0,t.jsx)(u.Cy,{children:"@font-face"}),", g\xe9n\xe9r\xe9 par Font Squirrel. Le second paragraphe utilise une webfont fournie par l'API Google Font."]}),(0,t.jsx)(l.A,{lang:"html",children:"<!DOCTYPE html>\n<html>\n <head>\n <link\n rel=\"stylesheet\"\n type=\"text/css\"\n href=\"http://fonts.googleapis.com/css?family=Droid+Sans|Tangerine\"\n />\n <style type=\"text/css\">\n #main {\n width: 900px;\n margin: auto;\n }\n\n @font-face {\n font-family: 'Plume';\n src: url('plumbae-webfont.eot');\n src: local('x'), url('plumbae-webfont.woff') format('woff'),\n url('plumbae-webfont.ttf') format('truetype'),\n url('plumbae-webfont.svg#webfontxhmaNmkH') format('svg');\n font-weight: normal;\n font-style: normal;\n }\n\n #tangerine {\n font-family: 'Tangerine', arial, serif;\n font-size: 48px;\n line-height: 50px;\n }\n\n #plume {\n font-family: 'Plume', arial, serif;\n font-size: 30px;\n line-height: 40px;\n }\n </style>\n </head>\n\n <body>\n <div id=\"main\">\n <p id=\"plume\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer rutrum, sem eget faucibus\n aliquet, neque metus volutpat felis, quis faucibus leo orci id ligula. Pellentesque habitant\n morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut at dictum risus.\n Praesent placerat massa vitae sem interdum tincidunt. Donec pharetra urna ut lacus\n scelerisque ut malesuada est cursus.\n </p>\n <p id=\"tangerine\">\n Suspendisse eget eros id erat varius congue. Nunc in nulla eget risus volutpat eleifend a\n nec eros. Donec ante dui, accumsan eu auctor vel, imperdiet et ligula. Phasellus a nibh\n lacus. Nam ac mi at quam faucibus viverra. Cras ut justo ac lorem accumsan rhoncus. Nulla\n sagittis ullamcorper erat, id fermentum arcu porttitor quis. In risus lacus, volutpat\n dignissim elementum eget, suscipit dignissim nisi.\n </p>\n </div>\n </body>\n</html>"})]}),(0,t.jsxs)("footer",{children:[(0,t.jsx)("p",{children:"J'esp\xe8re que ce tutoriel aura \xe9veill\xe9 votre inventivit\xe9 en mati\xe8re de polices sur le web, mais faites tout de m\xeame attention \xe0 ne pas surcharger vos pages avec de trop nombreuses polices, ni des polices trop volumineuses."}),(0,t.jsx)("p",{children:"A bient\xf4t dans un prochain tutoriel !"})]})]});m.wrappers=e=>(0,t.jsx)(r.A,{children:e});let f=m}},e=>{var s=s=>e(e.s=s);e.O(0,[8916,5422,6379,7351,8593,1940,4339,2503,3526,636,6593,8792],()=>s(69924)),_N_E=e.O()}]);
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.