Paletas de colores y fuentes de SharePoint

Artículo
03/21/2023

Use esta referencia para definir la paleta de colores o la combinación de fuentes empleada en un sitio de SharePoint.

[! IMPORTANTE] Esta opción de extensibilidad solo está disponible para las experiencias clásicas de SharePoint. No puede usar esta opción con experiencias modernas en SharePoint Online, como con los sitios de comunicación.

Paletas de colores

Una paleta de colores es la combinación de colores que se utiliza en un sitio de SharePoint. La paleta de colores de un sitio de SharePoint se define en un archivo de paleta de colores. El archivo de vista previa de página maestra también usa ranuras de color para generar imágenes de miniatura y de vista previa de un sitio. A continuación se describe la estructura del archivo de paleta de colores y el archivo de vista previa de página maestra:

Archivo de paleta de colores (.spcolor)

Los archivos de paleta de colores se usan en el asistente Cambiar la apariencia, que permite a los usuarios cambiar el aspecto de su sitio mediante la interfaz de usuario de temas de SharePoint. En SharePoint hay instaladas 32 paletas de colores de forma predeterminada. También se pueden crear archivos de paleta de colores adicionales. En el siguiente ejemplo se muestra el formato de un archivo de paleta de colores.

<s:colorPalette isInverted="InvertedSetting" previewSlot1="Slot1" previewSlot2="Slot2" previewSlot3="Slot3" xmlns:s="http://schemas.microsoft.com/sharepoint/">
    <s:color name="ColorSlot" value="Color" />
    <!--additional color slots-->
</s:colorPalette>

En un archivo de paleta de colores, se sustituyen los siguientes marcadores de posición:

InvertedSetting es un valor booleano. Suele ser true si la paleta de colores es texto claro sobre un fondo oscuro. Suele ser false si la paleta de colores es texto oscuro sobre un fondo claro.
Slot1 es el nombre de la anotación de la ranura de color que se va a usar como primer bloque del icono de la paleta en el selector de la paleta de colores de la experiencia de creación de temas.
Slot2 es el nombre de la anotación de la ranura de color que se va a usar como segundo bloque del icono de la paleta en el selector de la paleta de colores de la experiencia de creación de temas.
Slot3 es el nombre de la anotación de la ranura de color que se va a usar como tercer bloque del icono de la paleta en el selector de la paleta de colores de la experiencia de creación de temas.
ColorSlot es el nombre de la anotación de la ranura de color que se está definiendo (por ejemplo, SiteTitle).
Color es el valor hexadecimal del color que se va a usar para la ranura de color especificada. Puede ser de 6 dígitos (RRGGBB) o de 8 (AARRGGBB). Si el valor hexadecimal es de 8 dígitos, los dos primeros representan el nivel de opacidad (00-FF, que se asigna a 0-255). Si el valor hexadecimal es de 6 dígitos, la opacidad predeterminada es 100 % o FF.

Los archivos de paleta de colores se encuentran en la Galería de temas del sitio raíz, en la colección de sitios de la carpeta 15 (http:// NombreDeLaColecciónDeSitios/_catalogs/theme/15/). Para obtener acceso a la Galería de temas desde la interfaz de usuario de SharePoint, en la página Configuración del sitio, en Galerías del diseñador web, seleccione Temas y luego 15.

Archivo de vista previa de página maestra (.preview)

Los archivos de vista previa de página maestra se usan para generar imágenes en miniatura y de vista previa cuando se emplea el asistente Cambiar la apariencia. Una página maestra debe tener un archivo de vista previa correspondiente para su empleo en el asistente Cambiar la apariencia. Un archivo de vista previa es un archivo con un formato especial que tiene secciones para la paleta de colores predeterminada, la combinación de fuentes predeterminada, el CSS con tokens y el HTML con tokens. Utiliza tokens de cadena para obtener el valor de las ranuras de color, los nombres de fuente y las cadenas localizadas de la IU. En el siguiente ejemplo se muestran las ranuras de color que se usan en el archivo de vista previa de página maestra.


[ID] #dgp-pageContainer
{
    background-color: [T_THEME_COLOR_PAGEBACKGROUND];
    color: [T_THEME_COLOR_BODYTEXT];
    width: 100%;
    height:100%;
    background-image: url('[T_IMAGE]');
    background-size: cover;
    font-family: [T_BODY_FONT];
}

Para obtener más información, vea How to: Create a master page preview file in SharePoint (Cómo: Crear un archivo de vista previa de página maestra en SharePoint)

Asignación de ranuras de color

En la tabla 1 se describen las ranuras de colores que están disponibles y dónde se usan en un sitio de SharePoint.

Nota:

Cuando se analizan los elementos de navegación, presionado se aplica a cuando un usuario hace clic o toca un elemento de navegación. Seleccionado se aplica a cuando un usuario navega a la página.> A continuación se resume un flujo normal de acciones y la ranura de color que se aplica al vínculo del elemento de navegación en cada paso:> El texto base de un vínculo de elemento de navegación: HeaderNavigationText> Un usuario mantiene el cursor sobre el vínculo del elemento de navegación: HeaderNavigationHoverText> Un usuario hace clic, toca o elige el vínculo del elemento de navegación: HeaderNavigationPressedText> El usuario se desplaza a la página elegida. La ranura de color que se aplica al elemento de navegación de la página en la que se encuentra el usuario: HeaderNavigationSelectedText

Tabla 1. Ranuras de color

Nombre de la anotación	Ubicación de la IU en la que se usa el color	Nombre del token
BodyText	Texto normal del cuerpo.	[T_THEME_COLOR_BODYTEXT]
SubtleBodyText	Texto del cuerpo que debe ser más claro que el normal. Un ejemplo sería el texto de los metadatos.	[T_THEME_COLOR_SUBTLEBODYTEXT]
StrongBodyText	Color del texto del cuerpo para aquel texto que debe destacar del texto normal del cuerpo.	[T_THEME_COLOR_STRONGBODYTEXT]
DisabledText	Texto deshabilitado. Por ejemplo, elementos no disponibles de menús.	[T_THEME_COLOR_DISABLEDTEXT]
SiteTitle	Color del texto del título de la página.	[T_THEME_COLOR_SITETITLE]
WebPartHeading	Color del texto de los encabezados de elementos web.	[T_THEME_COLOR_WEBPARTHEADING]
ErrorText	Color de error principal que se usa para el texto, los bordes y los fondos de error, según sea necesario.	[T_THEME_COLOR_ERRORTEXT]
AccentText	Color del texto del cuerpo con énfasis.	[T_THEME_COLOR_ACCENTTEXT]
SearchURL	Color del texto de la dirección URL que se encuentra en los resultados de búsqueda. También se emplea para resaltar nuevos elementos o notificaciones de estado correctas.	[T_THEME_COLOR_SEARCHURL]
Hyperlink	Color del texto de los hipervínculos.	[T_THEME_COLOR_HYPERLINK]
HyperlinkFollowed	Color del texto de los hipervínculos seguidos.	[T_THEME_COLOR_HYPERLINKFOLLOWED]
HyperlinkActive	Color del hipervínculo al presionar.	[T_THEME_COLOR_HYPERLINKACTIVE]
CommandLinks	Vínculos de comando grandes que deben ser un poco más claros que el texto del cuerpo por su tamaño.	[T_THEME_COLOR_COMMANDLINKS]
CommandLinksSecondary	Color de vínculo de comando para aquellos vínculos que son más pequeños y por tanto tienen un color más fuerte para destacar.	[T_THEME_COLOR_COMMANDLINKSSECONDARY]
CommandLinksHover	Color de vínculo de comando al pasar.	[T_THEME_COLOR_COMMANDLINKSHOVER]
CommandLinksPressed	Color de vínculo de comando al presionar.	[T_THEME_COLOR_COMMANDLINKSPRESSED]
CommandLinksDisabled	Color de vínculo de comando cuando el vínculo de comando está deshabilitado.	[T_THEME_COLOR_COMMANDLINKSDISABLED]
BackgroundOverlay	Color de fondo principal que es visible entre la imagen de fondo opcional y el contenido de la página.	[T_THEME_COLOR_BACKGROUNDOVERLAY]
DisabledBackground	Fondo de elementos deshabilitados como controles de explorador, por ejemplo, cuadro de entrada o de selección (excepto botones).	[T_THEME_COLOR_DISABLEDBACKGROUND]
PageBackground	Color de fondo de la página. Aparece detrás de la imagen de fondo opcional.	[T_THEME_COLOR_PAGEBACKGROUND]
HeaderBackground	Color de fondo de la zona de encabezado de la página.	[T_THEME_COLOR_HEADERBACKGROUND]
FooterBackground	Color de fondo de la zona de pie de página de la página.	[T_THEME_COLOR_FOOTERBACKGROUND]
SelectionBackground	Color de fondo de los elementos de lista seleccionados y los elementos de menú desplegable.	[T_THEME_COLOR_SELECTIONBACKGROUND]
HoverBackground	Color de fondo de los elementos de lista y los elementos de menú desplegable al pasar.	[T_THEME_COLOR_HOVERBACKGROUND]
RowAccent	Borde izquierdo con énfasis en elementos de lista seleccionados.	[T_THEME_COLOR_ROWACCENT]
StrongLines	Bordes de controles de explorador al pasar.	[T_THEME_COLOR_STRONGLINES]
Lines	Bordes de controles de explorador.	[T_THEME_COLOR_LINES]
SubtleLines	Color de borde tenue. Por ejemplo, líneas de cuadrícula para edición incluida.	[T_THEME_COLOR_SUBTLELINES]
DisabledLines	Color de borde para controles de explorador deshabilitados como cuadros de entrada y selección.	[T_THEME_COLOR_DISABLEDLINES]
AccentLines	Color de borde con foco para controles de explorador seleccionados.	[T_THEME_COLOR_ACCENTLINES]
DialogBorder	Color de borde de los cuadros de diálogo.	[T_THEME_COLOR_DIALOGBORDER]
Navegación	Color del texto de los elementos de navegación horizontales y verticales.	[T_THEME_COLOR_NAVIGATION]
NavigationAccent	Color del texto de un elemento de navegación horizontal seleccionado.	[T_THEME_COLOR_NAVIGATIONACCENT]
NavigationHover	Color del texto de navegación al pasar. Se aplica a la navegación de nivel superior y al Inicio rápido en modo horizontal.	[T_THEME_COLOR_NAVIGATIONHOVER]
NavigationPressed	Color del texto de un elemento de navegación al presionar. Se aplica a la navegación de nivel superior y al Inicio rápido en modo horizontal.	[T_THEME_COLOR_NAVIGATIONPRESSED]
NavigationHoverBackground	Color de fondo de los elementos del Inicio rápido en modo vertical al pasar sobre el elemento de navegación.	[T_THEME_COLOR_NAVIGATIONHOVERBACKGROUND]
NavigationSelectedBackground	Color de fondo de los elementos del Inicio rápido en modo vertical una vez seleccionado el elemento de navegación.	[T_THEME_COLOR_NAVIGATIONSELECTEDBACKGROUND]
EmphasisText	Color del texto que aparece sobre fondo con énfasis.	[T_THEME_COLOR_EMPHASISTEXT]
EmphasisBackground	Color de fondo con énfasis que aparece directamente detrás de texto con énfasis.	[T_THEME_COLOR_EMPHASISBACKGROUND]
EmphasisHoverBackground	Color de fondo al pasar, para elementos que usan fondo con énfasis.	[T_THEME_COLOR_EMPHASISHOVERBACKGROUND]
EmphasisBorder	Color del borde de los elementos que usan fondo con énfasis.	[T_THEME_COLOR_EMPHASISBORDER]
EmphasisHoverBorder	Color del borde al pasar, para elementos que usan fondo con énfasis.	[T_THEME_COLOR_EMPHASISHOVERBORDER]
SubtleEmphasisText	Texto que aparece sobre fondo con énfasis tenue.	[T_THEME_COLOR_SUBTLEEMPHASISTEXT]
SubtleEmphasisCommandLinks	Color de vínculo de comando para vínculos que aparecen sobre fondo con énfasis tenue.	[T_THEME_COLOR_SUBTLEEMPHASISCOMMANDLINKS]
SubtleEmphasisBackground	Fondo que aparece directamente detrás de texto con énfasis tenue.	[T_THEME_COLOR_SUBTLEEMPHASISBACKGROUND]
TopBarText	Color de texto y glifo del menú de bienvenida, los iconos de la barra de inicio rápido y las pestañas de la cinta cerradas.	[T_THEME_COLOR_TOPBARTEXT]
TopBarBackground	Color de fondo de la barra superior, que se ve debajo y a la derecha de la navegación de conjunto.	[T_THEME_COLOR_TOPBARBACKGROUND]
TopBarHoverText	Color de texto y glifo al pasar del menú de bienvenida, los iconos de la barra de inicio rápido y las pestañas de la cinta cerradas.	[T_THEME_COLOR_TOPBARHOVERTEXT]
TopBarPressedText	Color de texto y glifo para cuando se presionan el menú de bienvenida, los iconos de la barra de inicio rápido o las pestañas de la cinta cerradas.	[T_THEME_COLOR_TOPBARPRESSEDTEXT]
HeaderText	Color del texto base de cualquier elemento de la zona del encabezado.	[T_THEME_COLOR_HEADERTEXT]
HeaderSubtleText	Texto auxiliar del cuadro de búsqueda cuando está en la zona del encabezado.	[T_THEME_COLOR_HEADERSUBTLETEXT]
HeaderDisableText	Texto del cuadro de búsqueda si este está deshabilitado y en la zona del encabezado.	[T_THEME_COLOR_HEADERDISABLETEXT]
HeaderNavigationText	Color del texto base de los vínculos de navegación de la zona del encabezado.	[T_THEME_COLOR_HEADERNAVIGATIONTEXT]
HeaderNavigationHoverText	Color del texto de los vínculos de navegación de la zona del encabezado al pasar sobre ellos.	[T_THEME_COLOR_HEADERNAVIGATIONHOVERTEXT]
HeaderNavigationPressedText	Color del texto de los vínculos de navegación de la zona del encabezado al presionarlos.	[T_THEME_COLOR_HEADERNAVIGATIONPRESSEDTEXT]
HeaderNavigationSelectedText	Color del texto de los vínculos de navegación de la zona del encabezado una vez seleccionado el vínculo.	[T_THEME_COLOR_HEADERNAVIGATIONSELECTEDTEXT]
HeaderLines	Líneas del cuadro de búsqueda cuando está en la zona del encabezado.	[T_THEME_COLOR_HEADERLINES]
HeaderStrongLines	Líneas del cuadro de búsqueda al pasar cuando está en la zona del encabezado.	[T_THEME_COLOR_HEADERSTRONGLINES]
HeaderAccentLines	Líneas del cuadro de búsqueda con foco cuando está en la zona del encabezado.	[T_THEME_COLOR_HEADERACCENTLINES]
HeaderSublteLines	Líneas tenues dentro de la zona del encabezado. No se usa en el CSS predeterminado.	[T_THEME_COLOR_HEADERSUBTLELINES]
HeaderDisabledLines	Líneas del cuadro de búsqueda si está deshabilitado en la zona del encabezado.	[T_THEME_COLOR_HEADERDISABLEDLINES]
HeaderDisabledBackground	Fondo del cuadro de búsqueda si está deshabilitado en la zona del encabezado.	[T_THEME_COLOR_HEADERDISABLEDBACKGROUND]
HeaderFlyoutBorder	Borde de los menús desplegables cuando se originan desde la zona del encabezado.	[T_THEME_COLOR_HEADERFLYOUTBORDER]
HeaderSiteTitle	Color del texto del título del sitio si está en la zona del encabezado.	[T_THEME_COLOR_HEADERSITETITLE]
SuiteBarBackground	Color de fondo de la navegación de conjunto.	[T_THEME_COLOR_SUITEBARBACKGROUND]
SuiteBarHoverBackground	Color de fondo al pasar de la navegación de conjunto.	[T_THEME_COLOR_SUITEBARHOVERBACKGROUND]
SuiteBarText	Color de texto y glifo de los elementos de la navegación de conjunto.	[T_THEME_COLOR_SUITEBARTEXT]
SuiteBarDisabledText	Color de texto y glifo de los elementos de conjunto deshabilitados. No se usa en el CSS predeterminado.	[T_THEME_COLOR_SUITEBARDISABLEDTEXT]
ButtonText	Color del texto de los botones.	[T_THEME_COLOR_BUTTONTEXT]
ButtonDisabledText	Color del texto de los botones deshabilitados.	[T_THEME_COLOR_BUTTONDISABLEDTEXT]
ButtonBackground	Color de fondo de los botones.	[T_THEME_COLOR_BUTTONBACKGROUND]
ButtonHoverBackground	Color de fondo de los botones al pasar.	[T_THEME_COLOR_BUTTONHOVERBACKGROUND]
ButtonPressedBackground	Color de fondo de los botones al ser presionados.	[T_THEME_COLOR_BUTTONPRESSEDBACKGROUND]
ButtonDisabledBackground	Color de fondo de los botones deshabilitados.	[T_THEME_COLOR_BUTTONDISABLEDBACKGROUND]
ButtonBorder	Color de borde de los botones.	[T_THEME_COLOR_BUTTONBORDER]
ButtonHoverBorder	Color de borde de los botones al pasar.	[T_THEME_COLOR_BUTTONHOVERBORDER]
ButtonPressedBorder	Color de borde de los botones al ser presionados.	[T_THEME_COLOR_BUTTONPRESSEDBORDER]
ButtonDisabledBorder	Color de borde de los botones que están deshabilitados.	[T_THEME_COLOR_BUTTONDISABLEDBORDER]
ButtonGlyph	Color de glifo de un glifo que aparece en un botón.	[T_THEME_COLOR_BUTTONGLYPH]
ButtonGlyphActive	Color de glifo al pasar de un glifo que aparece en un botón.	[T_THEME_COLOR_BUTTONGLYPHACTIVE]
ButtonGlyphDisabled	Color de glifo de un botón deshabilitado.	[T_THEME_COLOR_BUTTONGLYPHDISABLED]
TileText	Texto que aparece sobre la capa de fondo del icono.	[T_THEME_COLOR_TILETEXT]
TileBackgroundOverlay	Color de la capa de fondo de los iconos.	[T_THEME_COLOR_TILEBACKGROUNDOVERLAY]
ContentAccent1	Primer color de énfasis que puede seleccionar un usuario en el selector de color del editor de texto enriquecido.	[T_THEME_COLOR_CONTENTACCENT1]
ContentAccent2	Segundo color de énfasis que puede seleccionar un usuario en el selector de color del editor de texto enriquecido.	[T_THEME_COLOR_CONTENTACCENT2]
ContentAccent3	Tercer color de énfasis que puede seleccionar un usuario en el selector de color del editor de texto enriquecido.	[T_THEME_COLOR_CONTENTACCENT3]
ContentAccent4	Cuarto color de énfasis que puede seleccionar un usuario en el selector de color del editor de texto enriquecido.	[T_THEME_COLOR_CONTENTACCENT4]
ContentAccent5	Quinto color de énfasis que puede seleccionar un usuario en el selector de color del editor de texto enriquecido.	[T_THEME_COLOR_CONTENTACCENT5]
ContentAccent6	Sexto color de énfasis que puede seleccionar un usuario en el selector de color del editor de texto enriquecido.	[T_THEME_COLOR_CONTENTACCENT6]

Combinaciones de fuentes

Las fuentes se definen en la combinación de fuentes (archivo .spfont) y la vista previa de página maestra (archivo .preview) de un sitio determinado de SharePoint. La combinación de fuentes define las fuentes que se usan en cuatro zonas: título, navegación, encabezado y cuerpo. En SharePoint se incluyen siete combinaciones de fuentes. Es posible crear combinaciones de fuentes adicionales. Los archivos de combinación de fuentes se encuentran en la subcarpeta 15 de la Galería de temas del sitio raíz de la colección de sitios (http:// NombreDeLaColecciónDeSitios/_catalogs/theme/15/). Para obtener acceso a la Galería de temas desde la interfaz de usuario de SharePoint, en la página Configuración del sitio, en Galerías del diseñador web, seleccione Temas y luego 15.

En el siguiente ejemplo se describe el formato de un archivo .spfont.


<?xml version="1.0" encoding="utf-8"?>
<s:fontScheme name="FontSchemeName" previewSlot1="Slot1" previewSlot2="Slot2" xmlns:s="http://schemas.microsoft.com/sharepoint/">
  <s:fontSlots>
    <s:fontSlot name="FontSlotName">
      <s:latin typeface="LatinScriptFont" />
      <s:ea typeface="EAScriptFont"/>
      <s:cs typeface="CSFont" />
      <s:font script="Language" typeface="ScriptFont" />
      <!--Additional fonts-->
  </s:fontSlots>
  <!--Additional font slots-->
</s:fontScheme>

En un archivo .spfont, se sustituyen los siguientes marcadores de posición:

FontSchemeName es el nombre de la combinación de fuentes.
Slot1 es el nombre de la ranura de fuente que se desea usar como primer bloque del icono de fuente en el selector de combinaciones de fuentes en el asistente Cambiar la apariencia.
Slot2 es el nombre de la ranura de fuente que se desea usar como segundo bloque del icono de fuente en el selector de combinaciones de fuentes en el asistente Cambiar la apariencia.
FontSlotName es el nombre de la ranura de fuente que se está definiendo (por ejemplo, title).
LatinScriptFont es la fuente que se va a usar en caligrafías latinas. Esta fuente también es la fuente de reserva. Es decir, es la fuente que se utiliza para un idioma que no tiene una caligrafía definida explícitamente en la combinación de fuentes.

Nota:

Debe proporcionar información adicional para usar fuentes de web en la combinación de fuentes. Para obtener más información, consulte la sección Fuentes web de este artículo.
EAScriptFont es la fuente que se va a usar para los scripts del Este de Asia. SharePoint no usa actualmente el elemento s:ea>.< Sin embargo, el <elemento s:ea> sigue siendo necesario en el esquema de fuente.
CSFont es la fuente que se va a usar para scripts complejos. SharePoint no usa actualmente el elemento s:cs>.< Sin embargo, el <elemento s:cs> sigue siendo necesario en el esquema de fuente.
Language es la caligrafía del idioma.
ScriptFont es la fuente que se usa para la caligrafía del idioma especificada.

En el siguiente ejemplo se muestra una parte de un archivo .spfont.


<s:fontScheme name="Georgia" previewSlot1="title" previewSlot2="body" xmlns:s="http://schemas.microsoft.com/sharepoint/">
    <s:fontSlots>
        <s:fontSlot name="title">
            <s:latin typeface="Georgia"/>
            <s:ea typeface=""/>
            <s:cs typeface="Segoe UI Light" />
            <s:font script="Arab" typeface="Tahoma" />
            <s:font script="Deva" typeface="Mangal" />
            <s:font script="Grek" typeface="Segoe UI Light" />
            <s:font script="Hang" typeface="Malgun Gothic" />
            <s:font script="Hans" typeface="Microsoft YaHei" />
            <s:font script="Hant" typeface="Microsoft JhengHei" />
            <s:font script="Hebr" typeface="Tahoma" />
            <s:font script="Hira" typeface="Meiryo" />
            <s:font script="Thai" typeface="Tahoma" />
            <s:font script="Armn" typeface="Tahoma" />
            <s:font script="Beng" typeface="Vrinda" />
            <s:font script="Cher" typeface="Plantagenet Cherokee" />
            <s:font script="Ethi" typeface="Nyala" />
            <s:font script="Geor" typeface="Sylfaen" />
            <s:font script="Gujr" typeface="Shruti" />
            <s:font script="Guru" typeface="Raavi" />
            <s:font script="Knda" typeface="Tunga" />
            <s:font script="Khmr" typeface="DaunPenh" />
            <s:font script="Laoo" typeface="DokChampa" />
            <s:font script="Mlym" typeface="Kartika" />
            <s:font script="Mymr" typeface="Myanmar Text" />
            <s:font script="Orya" typeface="Kalinga" />
            <s:font script="Sinh" typeface="Iskoola Pota" />
            <s:font script="Syrc" typeface="Estrangelo Edessa" />
            <s:font script="Taml" typeface="Latha" />
            <s:font script="Telu" typeface="Gautami" />
            <s:font script="Thaa" typeface="MV Boli" />
            <s:font script="Tibt" typeface="Cordia New" />
            <s:font script="Yiii" typeface="Microsoft Yi Baiti" />
        </s:fontSlot>
???

SharePoint incluye compatibilidad con las fuentes web. Para usar fuentes web en la combinación de fuentes, tiene que proporcionar información adicional. Para obtener más información, consulte la sección Fuentes web de este artículo.

Fuentes web seguras

Las fuentes web seguras son un conjunto de fuentes ampliamente usadas y disponibles en la mayoría de los dispositivos de forma predeterminada. Para especificar una fuente web segura en la combinación de fuentes, incluya el nombre de la fuente en el atributo typeface de la ranura de fuente. En el siguiente ejemplo se muestra una fuente web segura usada en una combinación de fuentes.


<s:fontSlot name="title">
  <s:latin typeface="Georgia"/>
???
</s:fontSlot>

Fuentes web

Las fuentes web son fuentes disponibles en Internet. Cuando un usuario ve un sitio que usa fuentes web, el explorador web descarga los archivos de fuente necesarios junto con el resto de la página. Para especificar una fuente web, tiene que proporcionar la dirección URL de los archivos de fuente web en cuatro formatos de fuente (para la compatibilidad entre exploradores) y una imagen en miniatura pequeña y grande para presentar los nombre de fuente en el selector de combinaciones de fuentes.

En el ejemplo siguiente se describe la información necesaria para usar una fuente web en un <elemento s:latin> .


<s:latin typeface="FontName"
  eotsrc="EotFile"
  woffsrc="WoffFile"
  ttfsrc="TtfFile"
  svgsrc="SvgFile"
  largeimgsrc="LargeImgFile"
  smallimgsrc="SmallImgFile" />

En este ejemplo de uso de una fuente web, se deben sustituir los siguientes marcadores de posición:

FontName es el nombre de la fuente web.
EotFile es la dirección URL relativa del archivo de fuente Embedded Open Type.
WoffFile es la dirección URL relativa del archivo de fuente Web Open Font.
TtfFile es la dirección URL relativa del archivo de fuente TrueType.
SvgFile es la dirección URL relativa del archivo de fuente Scalable Vector Graphics.
LargeImgFile es la dirección URL relativa de la imagen en miniatura grande que se desea usar en el selector de combinaciones de fuentes.
SmallImgFile es la dirección URL relativa de la imagen en miniatura pequeña que se desea usar en el selector de combinaciones de fuentes.

Nota:

Las rutas de acceso a los archivos deben ser la dirección URL completa (i.e. https://tenant.sharepoint.com/sites/sitename/_catalogs/theme/15/fontfile.wof) Los atributos LargeImgFile y SmallImgFile tienen que estar presentes en la etiqueta latina, incluso si se les da valores vacíos.

Ranuras de fuente

En la tabla 1 se describen las ranuras de fuente disponibles y la ubicación de la página en la que se utilizan.

Tabla 1. Ranuras de fuente

Nombre de ranura de fuente	Descripción
title	Se usa para el título de la página.
navegación	Se usa para los elementos de navegación horizontales y verticales de la página.
large-heading	Se usa para el encabezado H1.
rumbo	Se usa para los encabezados H2 y H3, los títulos de elementos web, los títulos de cuadro de diálogo y los títulos de llamada.
small-heading	Se usa para encabezados H4.
large-body	Se usa para el texto de cuerpo grande (15 y 19 píxeles).
body	Fuente base que se usa en cualquier otro lugar de la página.

Compartir a través de