Ejemplo de texto avanzado

Tradicionalmente, las familias de fuentes se han distribuido en un número limitado de variaciones: un conjunto de pesos, estilos y anchos (y combinaciones de éstos) codificados que pueden seleccionarse como fuentes independientes.

Las fuentes variables amplían esta idea. En lugar de distribuir las variaciones de la familia tipográfica como archivos de fuentes independientes, una única fuente variable puede producir las variaciones (y muchas más) mediante interpolación.

Esto se consigue definiendo los llamados "ejes variables" en el tipo de letra para propiedades como la anchura, la inclinación o el peso. El usuario puede elegir entre los valores preestablecidos en estos ejes o establecer cualquier valor personalizado en el rango que admita la fuente.

Este ejemplo incluye una fuente variable llamada "Georama" (Copyright 2020 The Georama Project Authors, Licensed under OFL 1.1). Tiene dos ejes variables: Uno para el peso y otro para el ancho. Manipulando cualquiera de ellos, el usuario puede crear una amplia gama de variaciones sobre el diseño de la fuente.

El ejemplo ilustra cómo se puede utilizar esto en un escenario del mundo real: Al iniciar el ejemplo, los fragmentos de texto se extienden fuera de los límites definidos en el diseño estricto.

Ajustando la anchura y/o el peso, el diseñador visual puede obtener variaciones de la fuente que se ajusten exactamente al diseño sin tener que cambiar el tamaño de la fuente.

El ejemplo asigna deslizadores a cada uno de los dos ejes variables de la fuente. A continuación, vincula los valores de los ejes variables a los deslizadores para que la fuente se actualice automáticamente cuando el usuario los cambie.

            font.variableAxes: {
                "wdth": widthSlider.value,
                "wght": weightSlider.value
            }

Los ejes variables se identifican por su etiqueta de cuatro caracteres. Algunas etiquetas, como "wdth" y "wght", se asignan a atributos específicos de la fuente por convención (en este caso: "width" y "weight", respectivamente.) Pero la fuente puede soportar cualquier eje siempre que esté denotado por una etiqueta de cuatro caracteres. La información sobre los ejes que admite la fuente suele incluirse en su nombre de archivo.

Ejecutar el ejemplo

Para ejecutar el ejemplo desde Qt Creatorabra el modo Welcome y seleccione el ejemplo de Examples. Para más información, consulte Qt Creator: Tutorial: Construir y ejecutar.

Proyecto de ejemplo @ code.qt.io