web-dev-qa-db-fra.com

Incorporer la police Ubuntu sur n'importe quelle page Web

Considérant des licences comme:

comment puis-je utiliser la famille de polices Ubuntu sur n’importe quel site Web sans obliger l’utilisateur à l’installer?
Toute chance de l'utiliser avec des outils tels que: http://code.google.com/intl/en-US/apis/webfonts/

websiteslicenseubuntu-font-family
16
takeshin

Il existe deux méthodes pour intégrer la police Ubuntu à votre site Web: en utilisant le répertoire de polices Google (préféré) ou en utilisant la déclaration @font-face CSS et en convertissant vos polices manuellement.

Utiliser Google Webfonts

Vous pouvez maintenant utiliser la police Ubuntu en tant que police Web Google. Cela simplifiera beaucoup le processus. La majeure partie du contenu de cette partie de la réponse provient de réponse de sladen.

Pourquoi utiliser l'API de police Google comme méthode préférée?

L'utilisation de l'API Google Font est une excellente suggestion car elle permet aux contrôleurs web de fonctionner automatiquement sur tous les navigateurs modernes sans avoir à se soucier des détails. L'utilisation de l'API de police signifie que les visiteurs verront toujours automatiquement la version latest ​​de la police.

Comment utiliser l'API Google Font?

Depuis le 21 décembre 2010, la famille de polices Ubuntu est maintenant incluse et déployable à partir de l'API de police de Google. Pour plus d'informations, visitez le site:

Vous pouvez lire publication de Google Web Font à propos des nouvelles, puis:

  1. Ouvrez le répertoire de polices Google: " Ubuntu - Utilisez cette police " page

  2. Cochez la combinaison de poids et de styles parmi les options Normal, Italique, Gras et Gras-Italique dont vous avez besoin pour votre page Web.

    alt text

  3. Si la valeur par défaut est incorrecte, sélectionnez la combinaison langue/script dont vous avez besoin: un site Web russe avec des exemples en anglais pourrait utiliser "cyrillique, latin".

    alt text

  4. Ajoutez la balise <link> donnée entre <head> ... </head> dans votre page HTML ou vos modèles, puis ajoutez le code CSS approprié entre les balises <style> ... </style> de votre <head>.

    Par exemple, si vous créez le site Web hybride russe/anglais et souhaitez utiliser la police par défaut pour tout le texte, vous pouvez ajouter le code suivant entre vos balises <head>:

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>

Notes:

"Latin" est le script ​​dans lequel l'anglais et de nombreuses autres langues européennes et africaines sont écrits.

"Subsetting" optimise les fichiers de polices en n'envoyant que des caractères pour certaines langues; les polices font environ 44 ko chacune. Le chiffre de 168 ko indiqué pour le moment concerne plus de 1 200 glyphes sous forme de téléchargement de police Web unique - et la plupart ne sont pas nécessaires pour un site Web unique.

Les fichiers de police Ubuntu sont automatiquement convertis au format approprié pour différents navigateurs. Selon la marque et la version, le format requis est WOFF, EOT, SVG ou TTF. La bonne combinaison de CSS est spécifique à chaque demande de page et résout par magie ce problème difficile.

Utiliser @ font-face

Vous pouvez intégrer les polices Ubuntu en en les convertissant en polices WOFF . Vous pouvez ensuite les intégrer à l'aide de la déclaration CSS @ font-face. Les polices (fichiers .ttf) peuvent être trouvées dans /usr/share/fonts/truetype/ubuntu-font-family.

Par exemple, pour utiliser la police Ubuntu Regular convertie en un fichier WOFF, Ubuntu-R.woff, utilisez ce code CSS:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

De même pour Ubuntu Bold:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu Italic:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu Bold Italic:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

Ceci est supporté par tous navigateurs récents .

Considérations

N'oubliez pas que certains utilisateurs configurent leurs navigateurs pour utiliser un jeu de polices spécifique et peuvent être ennuyés si des polices personnalisées sont utilisées. Lisez également le Licence de polices Ubunt pour connaître les conditions exactes de distribution de la police.

25
dv3500ea

L'utilisation de l'API Google Font est une excellente suggestion car elle permet aux contrôleurs web de fonctionner automatiquement sur tous les navigateurs modernes sans avoir à se soucier des détails. L'utilisation de l'API de police signifie que les visiteurs verront toujours automatiquement la version latest ​​de la police.

Depuis le 21 décembre 2010, la famille de polices Ubuntu est maintenant incluse et déployable à partir de l'API de police de Google. Pour plus d'informations, visitez le site:

Vous pouvez lire publication de Google Web Font à propos des nouvelles, puis:

  1. Ouvrez le répertoire de polices Google: " Ubuntu - Utilisez cette police " page
  2. Cochez la combinaison de poids et de styles parmi les options Normal, Italique, Gras et Gras-Italique dont vous avez besoin pour votre page Web.
  3. Si la valeur par défaut est incorrecte, sélectionnez la combinaison langue/script dont vous avez besoin: un site Web russe avec des exemples en anglais pourrait utiliser "cyrillique, latin".
  4. Copiez et collez les deux lignes de CSS dans les sections <head> ... </head> et <style>...</style> de votre page HTML ou de vos modèles.

Remarques:

"Latin" est le script ​​dans lequel l'anglais et de nombreuses autres langues européennes et africaines sont écrits.

"Subsetting" optimise les fichiers de polices en n'envoyant que des caractères pour certaines langues; les polices font environ 44 Ko chacune. Le chiffre de 168 ko indiqué pour le moment concerne plus de 1 200 glyphes sous forme de téléchargement de police Web unique - et la plupart ne sont pas nécessaires pour un site Web unique.

Les fichiers de police Ubuntu sont automatiquement convertis au format approprié pour différents navigateurs. Selon la marque et la version, le format requis est WOFF, EOT, SVG ou TTF. La bonne combinaison de CSS est spécifique à chaque demande de page et résout par magie ce problème difficile.

10
sladen

Le rendu des polices côté serveur (ou peut-être un meilleur "rendu dynamique des polices") est un problème intéressant depuis assez longtemps.

Techniquement, il semble logique que pour qu'une machine affiche une police spécifique, elle devrait déjà être installée localement.

D'autre part, la conception Web perd beaucoup en raison de la nécessité de s'en tenir aux "polices Web" de base/bien connues.

CSS2.1 a apporté quelques améliorations en utilisant la règle @ font-face declaration.
Il n’est pas encore devenu un standard, mais il finira par fonctionner avec CSS3.

En plus de cela, il y a eu quelques méthodes alternatives, comme:

J'espère que les liens fournis vous donneront une meilleure idée de ce qui peut être fait ;-)

8
Pavlos G.