La fuente San Francisco de Apple recién creada es cómoda para los ojos humanos según la investigación. Normalmente, la fuente de Apple no se puede usar en ninguna página web a través de CSS. Este tipo de fuentes están integradas en el producto de Apple, pero la nueva fuente San Francisco se puede usar en cualquier contenido web. El Sr. Craig Hockenberry presenta el procedimiento de cómo podemos usar esa fuente en su página web solo a través de CSS.
Sintaxis:
body {
font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
Uso de Firefox e Internet Explorer -sistema Apple; y para Chrome usamos BlinkMacSystemFont .
Nota: Para uso del sistema, puede descargar la fuente San francisco desde aquí . Después de la descarga, debe instalar cada versión una por una.
Otras variantes disponibles:
- familia de fuentes: -apple-system-body
- familia de fuentes: -apple-system-headline
- familia de fuentes: -apple-system-subtítulo
- familia de fuentes: -apple-system-caption1
- familia de fuentes: -apple-system-caption2
- familia de fuentes: -apple-system-footnote
- familia de fuentes: -apple-system-short-body
- familia de fuentes: -apple-system-short-headline
- familia de fuentes: -subtítulo-corto-del-sistema-de-apple
- familia de fuentes: -apple-system-short-caption1
- familia de fuentes: -apple-system-short-footnote
- familia de fuentes: -apple-system-tall-body
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>San Francisco font</title>
<style>
body {
font-family: -apple-system,
BlinkMacSystemFont, sans-serif;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>Welcome To San francisco font</h3>
<p>
This font are pplicable
now in webpages
</p>
<p>
To apply this font on your web
site through CSS just follow the
body tag element in the style tag
</p>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA