fonts - para - importar fuente css

Uso de @ font-face para la fuente de la interfaz de usuario de Segoe

Question

Tengo Google por una hora y no puedo saber si puedo usar @ font-face usando la fuente de la interfaz de usuario de Segoe. ¿Alguien sabría si la licencia de la fuente me permitirá hacer esto?

Answer 1

Como señalan las otras respuestas, la interfaz de usuario de Segoe no está disponible para su uso en aplicaciones web no creadas por Microsoft o sus agentes . Sin embargo, para responder al título de su pregunta, me gustaría señalar que los mismos Microsoft utilizan la interfaz de usuario de Segoe en sus aplicaciones web a través de @ font-face, por ejemplo, desde el 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;
}

Incluso proyectos como Metro UI, que se parecen exactamente a Windows 8 , usan 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'');
}

Yo recomendaría OpenSans.

Answer 2

No es la misma fuente en esa página. La fuente en esa página es Segoe UI Mono. Que yo sepa, se supone que Segoe UI debe aparecer solo en Microsoft Windows.

Answer 3

No puede obtener una licencia de la interfaz de usuario de Segoe de Microsoft sin contacto directo, puede obtener la licencia de la fuente mono de Ascender Corp con enlaces desde la página web de Microsoft para la interfaz de usuario de Segoe, sin embargo, no es lo mismo que la interfaz de usuario de Segoe.

Yo sugeriría Open Sans como una alternativa a la fuente de la interfaz de usuario de Segoe, es bastante similar y tiene muchas más licencias abiertas para usar como webfont (ese enlace es en realidad a la versión alojada de la fuente de Google). Por lo tanto, podría tener a Segoe como principal. la fuente luego vuelve a Open Sans en sistemas que no sean Windows 7+.

Answer 4

Técnicamente, puede crear una fuente web utilizando cualquier fuente en su carpeta "C: / Windows / Fonts /". En la mayoría de los casos (incluida la interfaz de usuario de Segoe), no se le permite hacerlo debido a restricciones de licencia. En su lugar, recomendaría Open Sans como una buena alternativa a la interfaz de usuario de Segoe.

Sin embargo, si se le permite hacer esto, puede seguir estos pasos:

1. Recupere su fuente de su carpeta "C: / Windows / Fonts /". (Windows)
2. Convierta la fuente a cualquier otro formato que desee para compatibilidad (TTF, EOT, SVG, WOFF)

3. Crea un archivo CSS con el siguiente código:

   @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. Ahora en su archivo CSS principal, use la etiqueta "familia de fuentes" para seleccionar su fuente web.

Reitero la importancia de tener una licencia válida para la fuente web. Cuando compre una licencia, asegúrese de tener los derechos para usar la fuente en la web . Algunas fuentes pueden venir con un paquete de fuentes web con el CSS y las fuentes ya preparadas para usted.