Editar estilos y opciones de fuente CSS en el panel Estilos

La tipografía en la web es una parte importante de la experiencia del usuario. Quieres asegurarte de que cumples las directrices de marca corporativa y que el contenido se muestra según lo esperado en varios dispositivos. El texto debe ser fácil de leer con el tamaño y el alto de línea. Los usuarios pueden cambiar el tamaño de las fuentes para satisfacer las necesidades individuales. Para situaciones en las que fuentes específicas no están disponibles en un dispositivo de usuario, debes proporcionar opciones de fuente de reserva.

CSS proporciona una mejor compatibilidad con la tipografía en los últimos años. Hay decenas de unidades CSS diferentes disponibles para definir el tamaño del texto. También tiene varias propiedades CSS que afectan al tamaño de fuente, el espaciado, el alto de línea y otras características tipográficas.

Para facilitar el trabajo con tipografía, un Editor de fuentes visual está ahora en el panel Estilos. Puede cambiar la configuración de fuente y los cambios se representan inmediatamente en el explorador. Todo ello sin conocimientos profundos de CSS.

Actualmente, la característica es experimental y debe activarla para Enable new font editor tool within the Styles pane Microsoft Edge Developer Tools.

Cualquier CSS del panel Estilos, ya sea definiciones de fuente o estilos en línea, muestra automáticamente un icono que abre el Editor de fuentes visual. Para abrir el Editor de fuentes visual, elija el icono Editor de fuentes.

Todos los campos del Editor de fuentes visuales se rellenan a partir de los valores del CSS en el panel Estilos. Por ejemplo, la definición se establece en en el panel Estilos, por lo que se muestra el campo de texto alto de línea y se muestra line-height 160% el desplegable de **** 160 unidades % . Además, el control deslizante se establece automáticamente para que coincida con los valores del campo de texto.

El Editor de fuentes consta de dos partes: el selector de familia de fuentes y el editor de propiedades CSS.

Selector de familia de fuentes

El selector de familia de fuentes es la parte superior del Editor de fuentes visual. Para elegir las fuentes de la regla CSS, en el editor CSS, use el selector familia de fuentes. Puede elegir fuentes principales y de reserva para cada regla CSS.

Usa el desplegable Familia de fuentes para elegir entre una lista de fuentes. Las fuentes se organizan en cuatro grupos.

1. Fuentes calculadas, que son las fuentes disponibles en la hoja de estilos en el panel Estilos.
2. Fuentes del sistema, que son las fuentes que están disponibles en el sistema operativo actual.
3. Familias de fuentes genéricas, como serif o sans-serif .
4. Valores globales, como inherit , initial y unset .

Después de elegir una fuente, se muestra otro menú desplegable para que elija fuentes de reserva. Puede elegir hasta ocho fuentes de reserva. Para quitar una fuente, elija el icono Eliminar familia de fuentes.

Editor de propiedades CSS

Puede cambiar las propiedades de fuente CSS en la parte inferior del Editor de fuentes visual. Puedes cambiar el tamaño de fuente, el alto de línea, el grosor de fuente y el espaciado entre letras mediante cualquiera de los controles de la interfaz de usuario. Los cambios se aplican inmediatamente en el explorador.

También puede convertir unidades CSS mediante el Editor de fuentes visual. Por ejemplo, puede usar la herramienta en una regla CSS donde el control deslizante Tamaño de fuente está establecido inicialmente en 16 pixels . Ahora, use el desplegable de unidades y elija el valor em . El 1 em valor mostrado es igual a 16 pixels .

El desplegable de unidades proporciona todas las unidades CSS numéricas que están disponibles. El tamaño de fuente, el alto de línea, el grosor de fuente y el espaciado usan unidades diferentes. Cuando los cuadros de texto tengan el foco, puede seleccionar las arrow up teclas y para ajustar la arrow down configuración. Para usar los controles deslizantes con un teclado, seleccione las arrow left teclas arrow down y.

El editor de propiedades CSS también incluye palabras clave preestablecidas. Para usar las palabras clave preestablecidas, en el lado derecho, elija el Toggle Input Type icono. La interfaz de usuario cambia y se muestra un desplegable de palabras clave preestablecidas. Para volver a la interfaz de usuario con el control deslizante y otros controles de la interfaz de usuario, vuelve a Toggle Input Type elegir el icono.