Paletas de cores e fontes do SharePoint

Artigo
03/21/2023

Use essa referência para definir o esquema de cores paleta ou fonte que é usado em um site SharePoint.

[! IMPORTANTE] Essa opção de extensibilidade só está disponível para experiências clássicas do SharePoint. Você não pode usar essa opção com experiências modernas no SharePoint Online, como nos sites de comunicação.

Paletas de cores

Uma paleta de cores é a combinação das cores que são usados em um site do SharePoint. A paleta de cores para um site do SharePoint é definida em um arquivo de paleta de cores. Cor slots também são usados pelo arquivo de visualização de página mestra para gerar imagens de miniatura e visualização de um site. O exemplo a seguir descreve a estrutura do arquivo de paleta de cores e o arquivo de visualização de página mestre:

Arquivo de paleta de cores (.spcolor)

Arquivos de paleta de cores são usados no Assistente de alterar a aparência, que permite aos usuários alterar a aparência do seu site usando a interface de usuário de temas do SharePoint. Por padrão, 32 arquivos da paleta de cores são instalados com o SharePoint. Você também pode criar arquivos de paleta de cores adicionais. O exemplo a seguir mostra o formato de um arquivo de paleta de cores.

<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>

Em um arquivo de paleta de cores, os seguintes espaços reservados são substituídos:

InvertedSetting é um valor booleano. true se a paleta de cores claro geralmente texto em um plano de fundo escuro. false se a paleta de cores escuro geralmente texto em um plano de fundo claro.
Slot1 é o nome de anotação do slot de cor a ser usado como o primeiro bloco do ícone da paleta no seletor de paleta de cores da experiência de temas.
Slot2 é o nome de anotação do slot de cor a ser usado como o segundo bloco do ícone da paleta no seletor de paleta de cores da experiência de temas.
Slot3 é o nome de anotação do slot de cor a ser usado como o bloco de terceiro do ícone da paleta no seletor de paleta de cores da experiência de temas.
ColorSlot é o nome de anotação do slot de cor que você está definindo (por exemplo, SiteTitle).
Color é o valor hexadecimal da cor a ser usado para o intervalo de cores especificado. Isso pode estar na 6 (RRGGBB) ou 8 dígitos (AARRGGBB). Se o valor hexadecimal é 8 dígitos, os dois primeiros dígitos representam o nível de opacidade (00-FF, que mapeia para 0 a 255). Se o valor hexadecimal é de seis dígitos, a opacidade padrão é 100% ou FF.

Os arquivos de paleta de cores estão localizados na Galeria de tema do site raiz, no conjunto de sites na pasta 15 (http:// SiteCollectionName/_catalogs/tema/15 /). Para acessar a Galeria de temas da interface do usuário do SharePoint, na página Configurações do Site, em Galerias de Web Designer, selecione temas e selecione 15.

Arquivos de visualização de página mestre (.preview)

Arquivos de visualização de página mestra são usados para gerar as imagens em miniatura e visualização de imagens quando você usar o Assistente de alterar a aparência. Uma página mestra deve ter um arquivo de visualização correspondente a ser usado no Assistente para alterar a aparência. Um arquivo de visualização é um arquivo formatado especialmente que tem seções para a paleta de cores padrão, o esquema de fontes padrão, tokenizado CSS e HTML tokenizado. Ele usa tokens de cadeia de caracteres para obter o valor de slots de cor, nomes de fontes e cadeias de caracteres localizadas da interface do usuário. O exemplo a seguir mostra slots cor sendo usados no arquivo de visualização da página mestra.


[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 obter mais informações, consulte Como criar um arquivo de visualização de página mestra no SharePoint

Mapeamento de slot de cor

A tabela 1 descreve os slots de cor que estão disponíveis e onde slots de cor são usados em um site do SharePoint.

Observação

Ao discutir itens de navegação, pressionado aplica-se a quando um usuário clica ou toca em um item de navegação. A seleção se aplica a quando um usuário é navegado até a página.> O seguinte resume um fluxo normal de ações e o slot de cor que se aplica ao link do item de navegação em cada etapa:> O texto base de um link de item de navegação: HeaderNavigationText> Um usuário passa o cursor sobre o link do item de navegação: HeaderNavigationHoverText> Um usuário clica, toca ou escolhe o link do item de navegação: HeaderNavigationPressedText> O usuário é navegado até a página escolhida. O intervalo de cores que se aplica ao item de navegação da página, o usuário agora está em: HeaderNavigationSelectedText

Tabela 1. Slots de cores

Nome da anotação	Onde a cor é usada na interface de usuário	Nome do token
BodyText	Corpo de texto normal.	[T_THEME_COLOR_BODYTEXT]
SubtleBodyText	Corpo de texto que deve ser mais claro que o normal. Um exemplo é o texto de metadados.	[T_THEME_COLOR_SUBTLEBODYTEXT]
StrongBodyText	Cor do texto de corpo de texto que deve destacarem de corpo de texto normal.	[T_THEME_COLOR_STRONGBODYTEXT]
DisabledText	Texto desabilitado. Por exemplo, os itens não está disponíveis nos menus.	[T_THEME_COLOR_DISABLEDTEXT]
SiteTitle	A cor do texto do título da página.	[T_THEME_COLOR_SITETITLE]
WebPartHeading	Cor do texto para cabeçalhos de Web Parts.	[T_THEME_COLOR_WEBPARTHEADING]
ErrorText	A cor de erro principal que é usada para texto de erro, bordas e planos de fundo, conforme necessário.	[T_THEME_COLOR_ERRORTEXT]
AccentText	Cor do texto acentuadas corpo de texto.	[T_THEME_COLOR_ACCENTTEXT]
SearchURL	Cor do texto para a URL encontrada nos resultados da pesquisa. Também é usada para realçar novos itens ou notificações de status bem-sucedido.	[T_THEME_COLOR_SEARCHURL]
Hiperlink	Cor do texto de hiperlinks.	[T_THEME_COLOR_HYPERLINK]
HyperlinkFollowed	Cor do texto de hiperlinks visitados.	[T_THEME_COLOR_HYPERLINKFOLLOWED]
HyperlinkActive	Cor do hiperlink quando pressionada.	[T_THEME_COLOR_HYPERLINKACTIVE]
CommandLinks	Links de comando grandes que deve ser um pouco mais claros que o corpo de texto devido a seu tamanho.	[T_THEME_COLOR_COMMANDLINKS]
CommandLinksSecondary	Cor do link de comando para os links que são menores e, portanto, têm uma cor forte para destacar.	[T_THEME_COLOR_COMMANDLINKSSECONDARY]
CommandLinksHover	Cor do link de comando em foco.	[T_THEME_COLOR_COMMANDLINKSHOVER]
CommandLinksPressed	Cor do link de comando quando pressionada.	[T_THEME_COLOR_COMMANDLINKSPRESSED]
CommandLinksDisabled	Cor do link de comando quando o link de comando está desabilitado.	[T_THEME_COLOR_COMMANDLINKSDISABLED]
BackgroundOverlay	A cor de fundo principal que é visível entre a imagem de plano de fundo opcional e o conteúdo da página.	[T_THEME_COLOR_BACKGROUNDOVERLAY]
DisabledBackground	Plano de fundo de elementos desativados, como os controles do navegador, por exemplo, entrada caixa ou selecione (exceto botões).	[T_THEME_COLOR_DISABLEDBACKGROUND]
PageBackground	A cor de plano de fundo da página. Aparece por trás da imagem de plano de fundo opcional.	[T_THEME_COLOR_PAGEBACKGROUND]
HeaderBackground	A cor de plano de fundo para a área de cabeçalho da página.	[T_THEME_COLOR_HEADERBACKGROUND]
FooterBackground	A cor de plano de fundo para a área de rodapé da página.	[T_THEME_COLOR_FOOTERBACKGROUND]
SelectionBackground	A cor de plano de fundo de itens de lista selecionado e itens de menu suspenso.	[T_THEME_COLOR_SELECTIONBACKGROUND]
HoverBackground	A cor de plano de fundo de itens de lista e itens de menu suspenso em foco.	[T_THEME_COLOR_HOVERBACKGROUND]
RowAccent	A borda esquerda acentuada em itens de lista selecionado.	[T_THEME_COLOR_ROWACCENT]
StrongLines	Bordas para os controles do navegador em foco.	[T_THEME_COLOR_STRONGLINES]
Linhas	Bordas de controles do navegador.	[T_THEME_COLOR_LINES]
SubtleLines	Cor da borda sutil. Por exemplo, as linhas de grade para edição embutida.	[T_THEME_COLOR_SUBTLELINES]
DisabledLines	Para controles desabilitados do navegador, como caixas de entrada a cor da borda e selecione caixas.	[T_THEME_COLOR_DISABLEDLINES]
AccentLines	Cor da borda para controles do navegador selecionado como foco.	[T_THEME_COLOR_ACCENTLINES]
DialogBorder	Cor de borda da caixa de diálogo.	[T_THEME_COLOR_DIALOGBORDER]
Navegação	Cor do texto para itens de navegação horizontal e vertical.	[T_THEME_COLOR_NAVIGATION]
NavigationAccent	Cor do texto de um item selecionado de navegação horizontal.	[T_THEME_COLOR_NAVIGATIONACCENT]
NavigationHover	Cor do texto de navegação em foco. Aplica à navegação superior e ao início rápido no modo horizontal.	[T_THEME_COLOR_NAVIGATIONHOVER]
NavigationPressed	Cor do texto do item de navegação quando pressionada. Aplica à navegação superior e ao início rápido no modo horizontal.	[T_THEME_COLOR_NAVIGATIONPRESSED]
NavigationHoverBackground	Cor de plano de fundo de itens de início rápido no modo vertical em foco sobre o item de navegação.	[T_THEME_COLOR_NAVIGATIONHOVERBACKGROUND]
NavigationSelectedBackground	Cor de plano de fundo de itens de início rápido no modo vertical depois que o item de navegação está selecionado.	[T_THEME_COLOR_NAVIGATIONSELECTEDBACKGROUND]
EmphasisText	A cor do texto que aparece na parte superior do plano de fundo de ênfase.	[T_THEME_COLOR_EMPHASISTEXT]
EmphasisBackground	A cor de plano de fundo acentuadas exibida diretamente atrás do texto de ênfase.	[T_THEME_COLOR_EMPHASISBACKGROUND]
EmphasisHoverBackground	Cor de plano de fundo em foco, para os elementos que estão usando o plano de fundo de ênfase.	[T_THEME_COLOR_EMPHASISHOVERBACKGROUND]
EmphasisBorder	Cor da borda para os elementos que estão usando o plano de fundo de ênfase.	[T_THEME_COLOR_EMPHASISBORDER]
EmphasisHoverBorder	Cor da borda em foco para os elementos que estão usando o plano de fundo de ênfase.	[T_THEME_COLOR_EMPHASISHOVERBORDER]
SubtleEmphasisText	Texto que aparece na parte superior do plano de fundo de ênfase sutil.	[T_THEME_COLOR_SUBTLEEMPHASISTEXT]
SubtleEmphasisCommandLinks	Cor do link de comando para links que aparecem na parte superior do plano de fundo de ênfase sutil.	[T_THEME_COLOR_SUBTLEEMPHASISCOMMANDLINKS]
SubtleEmphasisBackground	Plano de fundo que aparece diretamente atrás do texto de ênfase sutil.	[T_THEME_COLOR_SUBTLEEMPHASISBACKGROUND]
TopBarText	Cor de texto e glifo para o menu de boas-vindas, ícones da barra de ferramentas de acesso rápido e guias da faixa de opções fechado.	[T_THEME_COLOR_TOPBARTEXT]
TopBarBackground	A cor de plano de fundo para a barra superior, que é constatada abaixo e à direita do painel de navegação suite.	[T_THEME_COLOR_TOPBARBACKGROUND]
TopBarHoverText	Cor de texto e glifo em foco para o menu de boas-vindas, ícones da barra de ferramentas de acesso rápido e guias da faixa de opções fechado.	[T_THEME_COLOR_TOPBARHOVERTEXT]
TopBarPressedText	Cor de texto e glifo para quando o menu de boas-vindas, ícones da barra de ferramentas de acesso rápido ou guias da faixa de opções fechado são pressionados.	[T_THEME_COLOR_TOPBARPRESSEDTEXT]
HeaderText	A cor do texto base para qualquer coisa na área de cabeçalho.	[T_THEME_COLOR_HEADERTEXT]
HeaderSubtleText	Texto auxiliar para a caixa de pesquisa quando na área de cabeçalho.	[T_THEME_COLOR_HEADERSUBTLETEXT]
HeaderDisableText	Texto para a caixa de pesquisa, se a caixa de pesquisa está desabilitada quando na área de cabeçalho.	[T_THEME_COLOR_HEADERDISABLETEXT]
HeaderNavigationText	Cor do texto base para os links de navegação na área de cabeçalho.	[T_THEME_COLOR_HEADERNAVIGATIONTEXT]
HeaderNavigationHoverText	Cor do texto para os links de navegação na área de cabeçalho quando você focaliza o link.	[T_THEME_COLOR_HEADERNAVIGATIONHOVERTEXT]
HeaderNavigationPressedText	Cor do texto para os links de navegação na área de cabeçalho quando você pressiona o link.	[T_THEME_COLOR_HEADERNAVIGATIONPRESSEDTEXT]
HeaderNavigationSelectedText	Cor do texto para os links de navegação na área de cabeçalho, depois que o link é selecionado.	[T_THEME_COLOR_HEADERNAVIGATIONSELECTEDTEXT]
HeaderLines	Linhas da caixa de pesquisa quando a caixa de pesquisa está na área de cabeçalho.	[T_THEME_COLOR_HEADERLINES]
HeaderStrongLines	Pesquisar linhas de caixa em foco quando a caixa de pesquisa está na área de cabeçalho.	[T_THEME_COLOR_HEADERSTRONGLINES]
HeaderAccentLines	Pesquisar linhas de caixa em foco quando a caixa de pesquisa está na área de cabeçalho.	[T_THEME_COLOR_HEADERACCENTLINES]
HeaderSublteLines	Linhas sutis encontradas dentro da área de cabeçalho. Não usado em default CSS.	[T_THEME_COLOR_HEADERSUBTLELINES]
HeaderDisabledLines	Linhas da caixa de pesquisa se a caixa de pesquisa está desabilitada quando ele estiver na área de cabeçalho.	[T_THEME_COLOR_HEADERDISABLEDLINES]
HeaderDisabledBackground	Plano de fundo da caixa de pesquisa se a caixa de pesquisa está desabilitada quando ele estiver na área de cabeçalho.	[T_THEME_COLOR_HEADERDISABLEDBACKGROUND]
HeaderFlyoutBorder	Borda de menus suspensos quando provenientes de área de cabeçalho.	[T_THEME_COLOR_HEADERFLYOUTBORDER]
HeaderSiteTitle	Cor do texto do título do site quando na área de cabeçalho.	[T_THEME_COLOR_HEADERSITETITLE]
SuiteBarBackground	Cor de plano de fundo para a navegação de pacote.	[T_THEME_COLOR_SUITEBARBACKGROUND]
SuiteBarHoverBackground	Cor de plano de fundo em foco para o painel de navegação suite.	[T_THEME_COLOR_SUITEBARHOVERBACKGROUND]
SuiteBarText	Cor de texto e glifo para os itens de navegação do pacote.	[T_THEME_COLOR_SUITEBARTEXT]
SuiteBarDisabledText	Cor de texto e glifo para itens de pacote desabilitado. Não usado em default CSS.	[T_THEME_COLOR_SUITEBARDISABLEDTEXT]
ButtonText	Cor do texto de botões.	[T_THEME_COLOR_BUTTONTEXT]
ButtonDisabledText	Cor do texto de botões desabilitados.	[T_THEME_COLOR_BUTTONDISABLEDTEXT]
ButtonBackground	Cor de plano de fundo para botões.	[T_THEME_COLOR_BUTTONBACKGROUND]
ButtonHoverBackground	Cor de plano de fundo para botões em foco.	[T_THEME_COLOR_BUTTONHOVERBACKGROUND]
ButtonPressedBackground	Cor de plano de fundo para botões enquanto pressionado.	[T_THEME_COLOR_BUTTONPRESSEDBACKGROUND]
ButtonDisabledBackground	Cor de plano de fundo para botões desabilitados.	[T_THEME_COLOR_BUTTONDISABLEDBACKGROUND]
ButtonBorder	Cor da borda para botões.	[T_THEME_COLOR_BUTTONBORDER]
ButtonHoverBorder	Cor da borda para botões em foco.	[T_THEME_COLOR_BUTTONHOVERBORDER]
ButtonPressedBorder	Cor da borda para os botões enquanto pressionado.	[T_THEME_COLOR_BUTTONPRESSEDBORDER]
ButtonDisabledBorder	Cor da borda para os botões que estão desabilitadas.	[T_THEME_COLOR_BUTTONDISABLEDBORDER]
ButtonGlyph	Cor do glifo para uma marca inteligente que aparece em um botão.	[T_THEME_COLOR_BUTTONGLYPH]
ButtonGlyphActive	Cor do glifo ao focalizar para uma marca inteligente que aparece em um botão.	[T_THEME_COLOR_BUTTONGLYPHACTIVE]
ButtonGlyphDisabled	Cor de glifo de um botão de desabilitado.	[T_THEME_COLOR_BUTTONGLYPHDISABLED]
TileText	O texto que aparece na parte superior de sobreposição de plano de fundo lado a lado.	[T_THEME_COLOR_TILETEXT]
TileBackgroundOverlay	Cor de blocos de sobreposição de plano de fundo.	[T_THEME_COLOR_TILEBACKGROUNDOVERLAY]
ContentAccent1	A primeira cor de ênfase que um usuário pode selecionar o seletor de cores do Editor de Rich Text.	[T_THEME_COLOR_CONTENTACCENT1]
ContentAccent2	A segunda cor de ênfase que um usuário pode selecionar o seletor de cores do Editor de Rich Text.	[T_THEME_COLOR_CONTENTACCENT2]
ContentAccent3	A terceira cor de ênfase que um usuário pode selecionar o seletor de cores do Editor de Rich Text.	[T_THEME_COLOR_CONTENTACCENT3]
ContentAccent4	A cor de ênfase quarta que um usuário pode selecionar o seletor de cores do Editor de Rich Text.	[T_THEME_COLOR_CONTENTACCENT4]
ContentAccent5	A cor de ênfase quinta que um usuário pode selecionar o seletor de cores do Editor de Rich Text.	[T_THEME_COLOR_CONTENTACCENT5]
ContentAccent6	A cor de ênfase sexta que um usuário pode selecionar o seletor de cores do Editor de Rich Text.	[T_THEME_COLOR_CONTENTACCENT6]

Esquemas de fontes

Fontes são definidas no esquema de fontes (arquivo .spfont) e a visualização de página mestra (arquivo .preview) para um determinado site do SharePoint. O esquema de fontes define as fontes usadas em quatro áreas: título, navegação, título e corpo. Sete esquemas de fontes estão incluídos no SharePoint. Você pode criar esquemas de fonte adicionais. Os arquivos de esquema de fontes estão localizados na subpasta 15 na Galeria de temas do site raiz do conjunto de sites (http:// SiteCollectionName/_catalogs/tema/15 /). Para acessar a Galeria de temas da interface do usuário do SharePoint, na página Configurações do Site, em Galerias de Web Designer, selecione temas e selecione 15.

O exemplo a seguir descreve o formato de um arquivo de .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>

Em um arquivo de .spfont, os seguintes espaços reservados são substituídos:

FontSchemeName é o nome do esquema de fontes.
Slot1 é o nome do slot de fonte que você deseja usar como o primeiro bloco do ícone da fonte no seletor de esquema de fonte no Assistente para alterar a aparência.
Slot2 é o nome do slot de fonte que você deseja usar como o segundo bloco do ícone da fonte no seletor de esquema de fonte no Assistente para alterar a aparência.
FontSlotName é o nome do slot de fonte que você está definindo (por exemplo, título).
LatinScriptFont é fonte a ser usada para scripts latinos. Essa fonte também é a fonte de fallback. Ou seja, esta é a fonte que é usada para um idioma que não tem um script que é definido explicitamente no esquema de fontes.

Observação

Você deve fornecer informações adicionais para usar fontes de web no seu esquema de fontes. Para obter mais informações, confira a seção Fontes da Web neste artigo.
EAScriptFont é a fonte a ser usado para scripts do Leste Asiático. O <elemento s:ea> não é usado atualmente pelo SharePoint. Mas, o <elemento s:ea> ainda é necessário no esquema de fonte.
CSFont é fonte a ser usada para scripts complexos. O <elemento s:cs> não é usado atualmente pelo SharePoint. Mas, o <elemento s:cs> ainda é necessário no esquema de fonte.
Language é o script de idioma.
ScriptFont é a fonte a ser usado para o script de idioma especificado.

O exemplo a seguir mostra uma parte de um arquivo de .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>
???

O SharePoint inclui suporte para fontes da Web. Você deve fornecer informações adicionais para usar fontes de web no seu esquema de fontes. Para obter mais informações, confira a seção Fontes da Web neste artigo.

Fontes seguras da Web

Fontes Web-safe são um conjunto de fontes que são amplamente usados e estão disponíveis na maioria dos dispositivos, por padrão. Para especificar uma fonte de web-safe no esquema de fontes, inclua o nome da fonte no atributo typeface do slot de fonte. O exemplo a seguir mostra uma fonte de web-safe usada em um esquema de fontes.


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

Fontes da Web

Fontes da Web são fontes que estão disponíveis na Internet. Quando um usuário exibir um site que usa fontes da web, o navegador da web baixa os arquivos de fonte necessários, juntamente com o restante da página. Para especificar uma fonte da web, você deve fornecer a URL para os arquivos de fonte da web em quatro formatos de fonte (para suporte nas navegadores) e uma imagem em miniatura pequena e grande para processar os nomes de fonte no seletor de esquema de fonte.

O exemplo a seguir descreve as informações necessárias para usar uma fonte Web em um <elemento s:latin> .


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

Neste exemplo do uso de uma fonte da web, os seguintes espaços reservados seriam ser substituídos:

FontName é o nome da fonte da web.
EotFile é a URL relativa para o arquivo de fonte incorporado tipo aberto.
WoffFile é a URL relativa para o arquivo de fonte do formato de fonte aberta da Web.
TtfFile é a URL relativa para o arquivo de fontes TrueType.
SvgFile é a URL relativa para o arquivo de fonte de elementos de gráficos vetoriais escaláveis.
LargeImgFile é a URL relativa à imagem em miniatura grande que você deseja usar no seletor de esquema de fonte.
SmallImgFile é a URL relativa à imagem em miniatura pequena que você deseja usar no seletor de esquema de fonte.

Observação

Os caminhos para os arquivos devem ser a URL completa (ou seja: https://tenant.sharepoint.com/sites/sitename/_catalogs/theme/15/fontfile.wof) Os atributos LargeImgFile e SmallImgFile devem estar presentes no rótulo Latin, mesmo se houver valores vazios.

Slots de fonte

Tabela 1 descreve os slots de fontes disponíveis e onde eles são usados em uma página.

Tabela 1. Slots de fonte

Nome da fonte Slot	Descrição
title	Usado para o título da página.
navegação	Usado para os elementos de navegação horizontal e vertical na página.
título de grandes	Usado para o título de S1.
heading	Usado para títulos H2 e H3, títulos de Web Parts, títulos de caixas de diálogo e títulos de frase de destaque.
título do pequeno	Usado para H4 títulos.
grande corpo	Usado para o grande corpo de texto (15 pixels e 19 pixels).
corpo	A fonte de base que é usada em qualquer outro local na página.

Partilhar via