Css font-size
Cómo configurar fuentes personalizadas con CSS y @font-face19 de noviembre de 2019En este post, te voy a mostrar paso a paso cómo configurar fuentes personalizadas en tu sitio web en CSS usando @font-face.¿Listo? Vamos a sumergirnos:Aquí tienes un vídeo, por si prefieres ver en lugar de leer: Paso 1: Consigue todos los archivos de fuentes que necesitas para la compatibilidad entre navegadoresPara cumplir con los mejores estándares entre navegadores, necesitarás 5 extensiones de archivos de fuentes específicas de tu fuente personalizada añadidas a tu proyecto.De hecho, aquí están las 5 extensiones de archivos que necesitarás:Si ya tienes todas estas extensiones de archivos de fuentes, entonces puedes saltar directamente al paso 2.¿Pero qué pasa si no tienes todas las extensiones de archivos de fuentes? Afortunadamente, resolver este problema es rápido y fácil. Simplemente dirígete a un generador de fuentes gratuito (a mí me gusta usar Transfonter), y sube allí tus archivos de fuentes.Por ejemplo, en el sitio web de Transfonter, pulsa el botón Añadir fuentes:
¡Impresionante! Ahora que tienes todos los archivos de fuentes, podemos empezar a añadir la fuente personalizada a nuestro proyecto.Paso 2: Añade los archivos de fuentes a tu proyectoPuede que estés pensando: ¿dónde pongo todos los archivos de fuentes? ¿Hay alguna carpeta específica que deba utilizar? La respuesta: Depende de la estructura de tu proyecto. Sin embargo, es bastante difícil equivocarse. Como es probable que tengas bastantes archivos de fuentes, mi recomendación sería colocar todos los archivos de fuentes en una carpeta llamada «Fuentes», así:
Estilo de letra Html
Al igual que con cualquier propiedad abreviada, cualquier valor individual que no se especifique se establece a su correspondiente valor inicial (posiblemente anulando los valores establecidos previamente utilizando propiedades no abreviadas). Aunque no se puede establecer directamente por fuente, las propiedades largas font-size-adjust y font-kerning también se restablecen a sus valores iniciales.Propiedades constituyentesEsta propiedad es una abreviatura de las siguientes propiedades CSS:
Los navegadores a menudo implementan varias palabras clave más, prefijadas: Gecko implementa -moz-window, -moz-document, -moz-desktop, -moz-info, -moz-dialog, -moz-button, -moz-pull-down-menu, -moz-list, y -moz-field.
Definición formalValor inicial de cada una de las propiedades de la abreviatura:Se aplica a todos los elementos. También se aplica a ::first-letter y ::first-line.InheritedyesPercentagescomo cada una de las propiedades del shorthand:Computed valuecomo cada una de las propiedades del shorthand:Animation typecomo cada una de las propiedades del shorthand:Formal syntax[ [ <‘font-style’> || <font-variant-css21> || <‘font-weight’> || <‘font-stretch’> ]? <‘font-size’> [ / <‘line-height’> ]? <‘font-family’> ] | caption | icon | menu | message-box | small-caption | status-barwhere <font-variant-css21> = [ normal | small-caps ]EjemplosConfiguración de las propiedades de la fuente/* Establecer el tamaño de la fuente a 12px y la altura de la línea a 14px.
Cambiar la fuente html
Nota: Cuando se enumeran varias fuentes, la página las busca en orden. Por ejemplo, en este caso, primero buscaría la Helvetica Neue. Si está presente, la utilizará, pero si no está presente, seguirá buscando la Helvética. Si la Helvética no está presente, entonces busca la Arial, y si la Arial no está presente, utiliza la fuente sans-serif por defecto en el ordenador. Además, los nombres de fuentes que tienen varias palabras (como «Helvetica Neue») deben ir entre comillas cuando se utilizan en el código CSS. Los nombres de fuentes que son una sola palabra no necesitan comillas.
Css font-face
Artículo Acciones@font-faceLa regla at CSS @font-face especifica una fuente personalizada con la que mostrar el texto; la fuente puede cargarse desde un servidor remoto o una fuente instalada localmente en el propio ordenador del usuario.Sintaxis@font-face {
DescripciónSi se proporciona la función local(), especificando un nombre de fuente a buscar en el ordenador del usuario, y el agente de usuario encuentra una coincidencia, se utiliza esa fuente local. En caso contrario, se descarga y utiliza el recurso de fuente especificado mediante la función url().
Al permitir que los autores proporcionen sus propias fuentes, @font-face hace posible diseñar contenidos sin estar limitados a las llamadas fuentes «web-safe» (es decir, las fuentes que son tan comunes que se consideran universalmente disponibles). La posibilidad de especificar el nombre de una fuente instalada localmente para buscarla y utilizarla hace posible personalizar la fuente más allá de lo básico, a la vez que permite hacerlo sin depender de una conexión a Internet.
Es común utilizar tanto url() como local() juntos, de modo que se utilice la copia instalada del usuario de la fuente si está disponible, volviendo a descargar una copia de la fuente si no se encuentra en el dispositivo del usuario.