Incrustar una fuente personalizada

Al incrustar una fuente personalizada en tu aplicación de la Tienda Windows, puedes elegir entre una gran variedad de familias y estilos de fuentes en tu diseño y, al mismo tiempo, garantizar que la fuente que elijas esté disponible a todos los usuarios de tu aplicación. Puedes buscar todo tipo de fuentes para descargar mediante tu motor de búsqueda favorito, pero solo puedes incrustar los siguientes tipos de fuentes en tu aplicación de la Tienda Windows:

• Un archivo Web Open Font Format (.woff)

• Un archivo OpenType (.eot) incrustado

• Un archivo True Type (.ttf) u Open Type (.otf) con el valor de "incrustabilidad" de fuentes Instalable

  Para determinar el valor de "incrustabilidad" de la fuente, haz clic con el botón secundario en el archivo de fuente, haz clic en Propiedades y haz clic en la pestaña Detalles, que muestra los valores de incrustabilidad del tipo y la fuente.

  

Importante

Como con la mayoría de los tipos de software, los archivos de fuentes se otorgan bajo licencia, no se venden.Las licencias que rigen el uso de las fuentes varían según el proveedor de que se trate pero, por lo general, la mayoría de las licencias, incluidas las proporcionadas por Microsoft con aplicaciones y Windows, no permiten incrustar las fuentes dentro de aplicaciones ni redistribuirlas de ningún otro modo.Así pues, como programador, es tu responsabilidad asegurarte de disponer de los derechos de licencia necesarios para cualquier fuente que incrustes en una aplicación o redistribuyas de cualquier otro modo.

En este tema aprenderás a:

• Agregar un archivo de fuente al proyecto

• Crear una regla @font-face

• Aplicar una fuente personalizada a una selección de texto

Agregar un archivo de fuente al proyecto

Puedes agregar el archivo de fuente al proyecto:

• Abriendo el menú Proyecto y haciendo clic en Agregar elemento existente

• Presionando Ctrl+I

• Copiando y pegando

• Arrastrando

Importante

Para agregar archivos de la carpeta Fonts (c:\windows\fonts), necesitas permisos administrativos en el equipo local.

No es necesario crear una carpeta en el proyecto para el archivo o los archivos de fuente que vas a incrustar, pero es recomendable.

Para crear una carpeta

• Haz clic con el botón secundario en el panel Proyectos, haz clic en Agregar nueva carpeta y asigna a la carpeta el nombre fonts.

Para agregar archivos de fuente

1. Con la carpeta font seleccionada en el panel Proyectos, abre el menú Proyecto y haz clic en Agregar elemento existente (teclado: Ctrl+I).

2. En el cuadro de diálogo Agregar elemento existente, haz clic en los archivos de fuente que quieres agregar y, a continuación, haz clic en Abrir.

   Sugerencia

   Puedes especificar varios archivos de fuente presionando continuamente CTRL mientras haces clic en cada archivo.

3. En este punto, puedes:

   • Hacer clic en Cancelar si no quieres agregar fuentes a una regla @font-face nueva o existente. Los archivos de fuentes se agregarán igualmente al proyecto, pero no se creará una regla @font-face.

   • Desactivar la casilla Crear nueva regla @font-face con estas fuentes como destino y hacer clic en Aceptar si deseas agregar las fuentes a una regla @font-face existente.

   • Confirmar que la casilla Crear nueva regla @font-face con estas fuentes como destino está activada si quieres crear una regla @font-face cuyo destino sea las fuentes que acabas de agregar.

     Nota

     Solo un nombre de fuente aparecerá en el campo font-family, aunque agregues varios archivos.Si agregas varios archivos y activas la casilla Crear nueva regla @font-face con estas fuentes como destino, se agregarán todas las fuentes a la misma regla @font-face.

   

4. Continúa con la siguiente sección para crear una regla @font-face cuyo destino sea las fuentes que acabas de agregar.

Crear una regla @font-face

Para que una fuente personalizada esté disponible en tu aplicación, debes crear una regla @font-face. El destino de la regla @font-face puede ser una familia de fuentes (por ejemplo, las versiones normal, negrita y cursiva de una fuente) o un único tipo de fuente (por ejemplo, solo la versión cursiva de una fuente). Cada tipo se implementa en un archivo de fuente.

Limelight consta de un archivo de fuente.Quicksand consta de seis archivos de fuente.El icono de archivos apilados indica que la familia de fuentes consta de varios tipos.

Por ejemplo, si quieres utilizar Quicksand Regular, crea una regla @font-face con la propiedad font-family establecida en Quicksand:

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

Si quieres usar Quicksand Bold para todo el texto que debe aparecer en negrita, crea una regla adicional @font-face con la propiedad font-family establecida en Quicksand y la propiedad font-weight establecida en bold:

@font-face
{
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Regular.otf') format('opentype');
}

@font-face {
       font-family: Quicksand;
       src: url('/fonts/Quicksand-Bold.otf') format('opentype');
       font-weight: bold;
}

En Blend, puedes crear o modificar una regla @font-face mediante alguna de las siguientes operaciones:

• En el cuadro de diálogo Agregar elemento existente, asegúrate de que la casilla Crear nueva regla @font-face con estas fuentes como destino está activada y haz clic en Aceptar. (Consulta el paso 3 del procedimiento anterior).

• En el panel Proyectos, haz clic con el botón secundario en un archivo de fuente y haz clic en **Crear nueva regla @font-face** o Agregar a regla @font-face existente.

• En el panel Reglas de estilo, haz clic con el botón secundario en el archivo .css, haz clic en Agregar regla de @ y haz clic en **Agregar regla @font-face**.

• En el panel Reglas de estilo, haz clic con el botón secundario en una regla @font-face y haz clic en **Editar regla @font-face**.

Cada una de estas opciones abre el editor de @font-face, donde se definen las propiedades para la regla @font-face.

En el procedimiento siguiente se explica cómo crear una regla @font-face para Quicksand Bold.

Para crear una regla @font-face

1. Nota

   Este procedimiento es una continuación del procedimiento "Para agregar archivos de fuente" de la sección anterior.

   En el cuadro de diálogo **Agregar fuentes seleccionadas a regla @font-face**, confirma que la casilla Crear nueva regla @font-face con estas fuentes como destino está activada y haz clic en Aceptar.

   Si agregas varios archivos al mismo tiempo, el editor de @font-face incluye todos los archivos de tipo de fuente como archivos de código fuente para font-family, y el nombre de font-family es el mismo que el del primer archivo de la lista de archivos que has agregado. Sin embargo, como quieres definir como destino un archivo de tipo de fuente específico, debes establecer las propiedades de ese archivo.

2. En el cuadro font-family, escribe Quicksand.

3. En la lista src, quita los archivos de código fuente haciendo clic en el signo menos (-) a la derecha de cada uno de ellos hasta que solo quede Quicksand-Bold.otf.

   Si quitas por error Quicksand-Bold.otf, puedes agregarlo de nuevo haciendo clic en el icono Agregar origen y luego en opentype. En la lista opentype, haz clic en Quicksand-Bold.otf.

4. En la lista font-weight, haz clic en bold y luego en Aceptar.

   @font-face de Blend" title="Agregar regla @font-face de Blend" />

5. Para crear reglas @font-face adicionales cuyos destinos sean archivos de tipo de fuente distintos, haz clic con el botón secundario en el archivo de fuente que deseas usar como destino en el panel Propiedades y después repite los pasos 2 a 4.

Sugerencia

Cuando creas una regla @font-face, esta se agrega detrás del punto de inserción en el archivo .css activo.La línea amarilla del panel Reglas de estilo indica el punto de inserción.

Aplicar una fuente personalizada a una selección de texto

Ahora que has agregado la fuente personalizada al proyecto y has creado una regla @font-face, puedes aplicar la fuente seleccionándola en la sección **fuentes de @font-face** de la lista desplegable font-family en el panel Propiedades de CSS.

En el siguiente procedimiento, agregarás la fuente Limelight al proyecto de PickaFlick, la aplicación de películas de Crear la primera aplicación de la Tienda Windows con Blend, parte 1: la página maestra (HTML y JavaScript).

Para aplicar la fuente personalizada

1. Selecciona el texto al que quieres aplicar la fuente personalizada.

2. En la categoría font del panel Propiedades de CSS, haz clic en la nueva fuente en la lista font-family.

   Sugerencia

   Observa que la lista Fuentes de @font-face ahora incluye las fuentes que has agregado.

   

   El texto especificado aparece en la fuente @font-face.