Share via

Fuente, Generador de estilos (Cuadro de diálogo)

  • Artículo

Actualización: noviembre 2007

La página Fuente del cuadro de diálogo Generador de estilos permite definir atributos de fuente CSS (hoja de estilos en cascada). Puede aplicar directamente estos atributos a elementos HTML o agregarlos a reglas de estilo CSS.

Para aplicar los atributos de fuente directamente a texto en los elementos HTML de la página

  1. Abra el documento HTML en la vista Diseño del diseñador HTML y seleccione el texto al que desee aplicar formato.

  2. Haga clic en Estilo en el menú Formato para abrir el cuadro de diálogo Generador de estilos.

  3. Seleccione Fuente en el panel izquierdo del cuadro de diálogo Generador de estilos.

    En el panel derecho, aparecerá el cuadro de diálogo Fuente, Generador de estilos.

Cuando aplique estilos de fuente al texto seleccionado en la vista Diseño, los atributos de estilo se insertarán en línea en el código de marcado HTML de la página. Cambie a la vista HTML para revisar los nuevos atributos de estilo insertados.

Para agregar atributos de fuente a una regla de estilo CSS definida en una hoja de estilos externa

  1. Abra una hoja de estilos externa existente y sitúe el punto de inserción entre las llaves ({ }) situadas detrás del selector correspondiente al estilo deseado.

  2. Haga clic en Generar estilo en el menú Estilos para abrir el cuadro de diálogo Generador de estilos.

  3. Haga clic en Fuente en el panel izquierdo del cuadro de diálogo Generador de estilos.

    En el panel derecho, aparecerá el cuadro de diálogo Fuente, Generador de estilos.

Nota:

El menú Estilos aparecerá cuando abra una hoja de estilos CSS externa para editarla. La opción Generar estilo del menú Estilos estará disponible cuando coloque el punto de inserción entre las llaves situadas detrás del selector de una regla de estilo.

Puede aplicar una clase de estilo CSS definida en una hoja de estilos externa a un elemento del elemento <BODY> de una página Web (o, en este caso, al propio elemento <BODY>) mediante la asignación del selector de estilo CSS como propiedad CLASS del elemento.

Las opciones disponibles en la página Fuente del cuadro de diálogo Generador de estilos son:

Tareas

Elementos de interfaz de usuario

Nombre de fuente

  • Family
    Proporciona una lista de opciones para la fuente que se va a utilizar en el texto mostrado con este estilo. Si está diseñando documentos para Internet, elija las fuentes que utilicen la mayoría de los usuarios. Probablemente, gran parte de los usuarios de Internet no tenga una gran variedad de fuentes instaladas. Si selecciona la opción Familia, podrá elegir el botón de puntos suspensivos (...) adyacente para abrir el cuadro de diálogo Selector de fuente y seleccionar fuentes. Para obtener más información, vea Selector de fuente (Cuadro de diálogo). Normalmente se muestran varias fuentes, así se proporcionan varias opciones. Por ejemplo, en el Selector de fuente puede seleccionar Verdana (una fuente del sistema Windows diseñada para mostrar páginas Web) y, después, agregar manualmente Arial, Helvetica (para exploradores Macintosh) y Sans-Serif (la opción de fuente genérica para usuarios que no tengan ninguna de las fuentes anteriores). El código de marcado de estilos CSS para FONT-FAMILY sería:

    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif

  • Fuente del sistema
    Seleccione esta opción si desea aplicar al estilo una opción de fuente del sistema que el usuario tenga definida en el equipo en el que ve la página. Por ejemplo, si selecciona Título de ventana, el explorador web de un usuario mostrará el texto de la página que tenga este estilo mediante la fuente asignada a Título de ventana en el equipo. Esta fuente de Título de ventana podría ser Times en un equipo y Verdana en otro. El código de marcado de estilos CSS que aplica la fuente del sistema para Título de ventana sería, por ejemplo:

    FONT: caption

Atributos de fuente

  • Color
    Establece el color del texto mostrado con el estilo. Hay varias maneras de especificar un color:

    • Escribir el nombre de un color.

    • Escribir un valor de color RGB válido (por ejemplo, #FF0000 corresponde al color rojo).

    • Seleccione una opción de la lista desplegable.

    • Hacer clic en el botón de puntos suspensivos (...) para abrir el cuadro de diálogo Selector de color y seleccionar colores adicionales.

    Por ejemplo, si selecciona el color rojo, se insertará el siguiente par de atributo CSS y valor:

    COLOR: red

    Nota:

    Si selecciona un color en el cuadro de diálogo Selector de color en lugar de hacerlo en la lista desplegable, se insertará el valor hexadecimal del color RGB en lugar del nombre del color. Por ejemplo, si selecciona el color rojo en el cuadro de diálogo Selector de color, se insertará el siguiente par de atributo CSS y valor: COLOR: #ff0000.

  • Cursiva
    Establece el atributo FONT-STYLE para el texto mostrado con este estilo. Puede seleccionar <Sin establecer> (ninguna opción elegida), Normal (no se aplica cursiva) o Cursiva. Por ejemplo, si selecciona Cursiva, se insertará el siguiente par de atributo CSS y valor:

    FONT-STYLE: italic

    Nota:

    Si el atributo es <Sin establecer>, no se agregará código al estilo. No se puede aplicar el atributo Italics a las fuentes del sistema.

  • Versales
    Establece el atributo FONT-VARIANTpara el texto mostrado con este estilo. Puede seleccionar <Sin establecer> (ninguna opción elegida), Normal (no se aplica el atributo Versales) o Versales. Por ejemplo, si selecciona Versales, se insertará el siguiente código de marcado CSS:

    FONT-VARIANT: small-caps

    Nota:

    No se puede aplicar el atributo Small Caps a las fuentes del sistema. Si el atributo es <Sin establecer>, no se agregará código al estilo.

Tamaño

Esta opción establece el tamaño de la fuente del estilo mediante uno de los tres atributos siguientes: Specific, Absolute o Relative.

Nota:

Si el atributo es <Sin establecer>, no se agregará código al estilo. No se puede aplicar el atributo Size a las fuentes del sistema.

  • Específico
    Establece un tamaño específico para la fuente. La lista desplegable adyacente muestra las opciones de unidad, que incluyen px, pt (valor predeterminado), pc, mm, cm, in, em, ex y %. Por ejemplo, si escribe 20 y acepta el valor de unidad predeterminado, se insertará el siguiente marcado CSS:

    FONT-SIZE: 20pt

    Nota:

    Si el atributo es <Sin establecer>, no se agregará código al estilo. Evite utilizar medidas en píxeles (px), ya que el texto con formato en píxeles se imprimirá con un tamaño mucho menor que el mostrado en pantalla.

  • Absoluto
    Establece un tamaño absoluto para la fuente, que puede elegir en una lista de opciones. Puede seleccionar <Sin establecer> (ningún valor especificado), Extra pequeño, Muy pequeño, Pequeño, Mediano, Grande, Muy grande o Extra grande. Por ejemplo, si elige Muy pequeño, se insertará el siguiente marcado CSS:

    FONT-SIZE: x-small

    Nota:

    Si el atributo es <Sin establecer>, no se agregará código al estilo.

  • Relativo
    Establece un tamaño relativo para la fuente, que puede elegir en una lista de opciones. El tamaño es relativo al elemento primario del estilo en cascada. Si el elemento <BODY> tiene un tamaño de 8 pt., por ejemplo, y el texto de un elemento <SPAN> contenido en el elemento <BODY> tiene un tamaño Menor, el tamaño del texto de <SPAN> será menor que 8 pt. Seleccione <Sin establecer> (ningún valor especificado), Menor o Mayor. Por ejemplo, si elige Mayor, se insertará el siguiente marcado CSS:

    FONT-SIZE: larger

    Nota:

    Si el atributo es <Sin establecer>, no se agregará código al estilo.

Efectos

Esta opción establece los efectos predefinidos para el estilo. Las casillas disponibles son las siguientes: Ninguno (sin efectos), Subrayado, Tachado y Línea alta.

Si selecciona Ninguno, no estará disponible ningún efecto. Si la opción Ninguno no está activada, puede elegir cualquier combinación de los demás efectos. Por ejemplo, si elige Subrayado y Tachado, se insertará el siguiente código de marcado CSS:

TEXT-DECORATION: underline line-through

Negrita

Esta opción establece el atributo FONT-WEIGHT basándose en los valores absolutos o relativos.

  • Absoluto
    Establece el atributo negrita absoluta del estilo en el atributo negrita asociado a la fuente. Puede seleccionar <Sin establecer> (ninguna opción elegida), Normal (no se aplica negrita) o Negrita. Por ejemplo, si elige Negrita, se insertará el siguiente marcado CSS:

    FONT-WEIGHT: bold

    Nota:

    No se pueden aplicar los atributos Absolute Bold y Relative Bold a las fuentes del sistema.

  • Relativo
    Establece el atributo negrita relativa del estilo en un atributo negrita de mayor o menor intensidad que el valor negrita predeterminado de la fuente. Puede seleccionar <Sin establecer> (ninguna opción elegida), Más clara (menos intenso que el atributo negrita predeterminado) o Más oscura (más intenso que el atributo negrita predeterminado). Como los atributos Lighter y Bolder son relativos a fuentes individuales, la intensidad del atributo negrita dependerá de la fuente a la que se aplique. Por ejemplo, si elige Más oscura, se insertará el siguiente marcado CSS:

    FONT-WEIGHT: bolder

Uso de mayúsculas

Establece el atributo TEXT-TRANSFORM para el estilo. Puede seleccionar <Sin establecer> (ninguna opción elegida), Ninguna (se mantienen las mayúsculas y minúsculas escritas), Mayúscula inicial, minúsculas o MAYÚSCULAS. Por ejemplo, si elige MAYÚSCULAS, se agregará la siguiente línea de código:

TEXT-TRANSFORM: uppercase

Nota:

Si el atributo es <Sin establecer>, no se agregará código al estilo.

Vea también

Conceptos

Información general sobre el trabajo con CSS

Referencia

Texto, Generador de estilos (Cuadro de diálogo)

Fondo, Generador de estilos (Cuadro de diálogo)

Selector de color (Cuadro de diálogo)

Selector de fuente (Cuadro de diálogo)