web-dev-qa-db-fra.com

Utilisation de @ font-face pour la police Segoe UI

J'ai Google depuis une heure maintenant et je ne peux pas savoir si je peux utiliser @ font-face en utilisant la police Segoe UI. Un organisme saurait-il si la licence de la police me permet de le faire?

fonts
21
omnix

Comme le notent les autres réponses, Segoe UI n'est pas disponible pour une utilisation dans des applications Web non créées par Microsoft ou leurs agents . Pour répondre au titre de votre question, je voudrais toutefois souligner que Microsoft utilise lui-même Segoe UI dans ses applications Web via @ font-face, par exemple, à partir du Microsoft Surface 2 CSS :

@font-face {
    font-family: 'Segoe UI';
    src: url('/surface/Assets/css/fonts/all/normal/segoeui.eot');
    src: url('/surface/Assets/css/fonts/all/normal/segoeui.eot?#iefix') format('embedded-opentype'),
         url('/surface/Assets/css/fonts/all/normal/segoeui.woff') format('woff'),
         url('/surface/Assets/css/fonts/all/normal/segoeui.svg#SegoeUI') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Semibold';
    src: url('/surface/Assets/css/fonts/all/semibold/seguisb.eot');
    src: url('/surface/Assets/css/fonts/all/semibold/seguisb.eot?#iefix') format('embedded-opentype'),
         url('/surface/Assets/css/fonts/all/semibold/seguisb.woff') format('woff'),
         url('/surface/Assets/css/fonts/all/semibold/seguisb.svg#SegoeUISemibold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Bold';
    src: url('/surface/Assets/css/fonts/all/bold/segoeuib.eot');
    src: url('/surface/Assets/css/fonts/all/bold/segoeuib.eot?#iefix') format('eot'), /* Wrong format will tell IE9+ to ignore and use WOFF instead. MSHAR-2822 */
         url('/surface/Assets/css/fonts/all/bold/segoeuib.woff') format('woff'),
         url('/surface/Assets/css/fonts/all/bold/segoeuib.svg#SegoeUIBold') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Segoe UI Light';
    src: url('/surface/Assets/css/fonts/all/light/segoeuil.eot');
    src: url('/surface/Assets/css/fonts/all/light/segoeuil.eot?#iefix') format('embedded-opentype'),
         url('/surface/Assets/css/fonts/all/light/segoeuil.woff') format('woff'),
         url('/surface/Assets/css/fonts/all/light/segoeuil.svg#SegoeUILight') format('svg');
    font-weight: normal;
    font-style: normal;
}

Même les projets comme Metro UI - qui ressemblent exactement à Windows 8 - utilisent OpenSans:

@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 700;
  src: local("Open Sans Bold"), local("OpenSans-Bold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/k3k702ZOKiLJc3WVjuplzJ1r3JsPcQLi8jytr04NNhU.woff) format('woff');
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: local("Open Sans Light"), local("OpenSans-Light"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/DXI1ORHCpsQm3Vp6mXoaTZ1r3JsPcQLi8jytr04NNhU.woff) format('woff');
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 800;
  src: local("Open Sans Extrabold"), local("OpenSans-Extrabold"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/EInbV5DfGHOiMmvb1Xr-hp1r3JsPcQLi8jytr04NNhU.woff) format('woff');
}
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local("Open Sans"), local("OpenSans"), url(https://themes.googleusercontent.com/static/fonts/opensans/v6/K88pR3goAWT7BTt32Z01mz8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}

Je recommanderais OpenSans.

27
mikemaccana

Vous ne pouvez pas octroyer de licence à Segoe UI de Microsoft sans contact direct, vous pouvez autoriser la police mono d'Ascender Corp qui est liée à la page Web de Microsoft pour Segoe UI, mais ce n'est pas la même chose que Segoe UI.

Je suggérerais Open Sans comme alternative à la police d'interface utilisateur Segoe, elle est assez similaire et a des licences beaucoup plus ouvertes pour l'utilisation comme police Web (ce lien est en fait vers la version hébergée de la police de Google) - Vous pouvez donc avoir Segoe comme principal puis revenir à Open Sans sur les systèmes non Windows 7+.

10
Ryan McDonough

Vous pouvez techniquement créer une police Web à l'aide de n'importe quelle police de votre dossier "C:\Windows\Fonts \". Dans la plupart des cas (y compris l'interface utilisateur de Segoe), , vous n'êtes pas autorisé à le faire en raison de restrictions de licence. Au lieu de cela, je recommanderais Open Sans comme une bonne alternative à Segoe UI.

Cependant, si vous y êtes autorisé, vous pouvez suivre ces étapes:

  1. Récupérez votre police dans votre dossier "C:\Windows\Fonts \". (Les fenêtres)
  2. Convertissez la police dans tous les autres formats que vous souhaitez pour la compatibilité (TTF, EOT, SVG, WOFF)

  3. Créez un fichier CSS avec le code suivant:

    @font-face{
    font-family: 'FontName';
    src: url('path/to/webfont.eot');
    src: url('path/to/webfont.woff'),
         url('path/to/webfont.ttf'),
         url('path/to/webfont.svg')
}

  4. Maintenant, dans votre fichier CSS principal, utilisez la balise "font-family" pour sélectionner votre police Web.

Je soulignerai à nouveau l'importance d'avoir une licence valide pour la police Web, lors de l'achat d'une licence assurez-vous que vous avez les droits d'utiliser la police sur le Web . Certaines polices peuvent être fournies avec un package de polices Web avec le CSS et les polices déjà préparées pour vous.

3
Rob Farr

Ce n'est pas la même police sur cette page. La police sur cette page est Segoe UI Mono. Pour autant que je sache, Segoe UI est censé apparaître uniquement sur Microsoft Windows.

0
Liero