Usando fontes da Web do Google

Question 1

Existem 2 métodos com os quais você pode incorporar a fonte Ubuntu em seu site - usando o Google Font Directory (preferencial) ou usando a @font-facedeclaração CSS e convertendo suas fontes manualmente.

Usando fontes da Web do Google

Agora você pode usar a fonte Ubuntu como fonte da web do Google. Isso tornará o processo muito mais simples. A maior parte do conteúdo desta parte da resposta vem deresposta de Sladen.

Por que usar a API Google Font é o método preferido?

Usar a API Google Font é uma excelente sugestão, pois permite que as webfonts funcionem automaticamente em todos os navegadores modernos sem se preocupar com os detalhes. Usar a API de fontes significa que os visitantes sempre verão omais recenteversão do tipo de letra automaticamente.

Como posso usar a API de fontes do Google?

Desde 21 de dezembro de 2010, a família de fontes Ubuntu agora está incluída e pode ser implantada a partir da API de fontes do Google, visite:

font.ubuntu.com/web

Você pode lera postagem do Google Web Fontsobre as notícias e então:

Abra o diretório de fontes do Google: "Ubuntu - Use esta fonte" página
Marque a combinação depesos e estilosentre Regular, Itálico, Negrito e Negrito-Itálico que você precisa para sua página da web.
Se o padrão estiver incorreto, selecione ocombinação de idioma/scriptvocê precisa: um site russo com exemplos em inglês pode usar "Cirílico, Latino".
Adicione a <link>tag fornecida <head> ... </head>em sua página HTML ou modelos e adicione o código CSS apropriado entre <style> ... </style>as tags em seu arquivo <head>.

Por exemplo, se você estivesse criando o site híbrido russo/inglês e quisesse usar a fonte como padrão para todo o texto, você poderia adicionar o seguinte código entre suas <head>tags:
```
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>
```

Notas:

"Latim" é oroteiroem que o inglês e muitas outras línguas europeias e africanas são escritas.

"Subsetting" otimiza os arquivos de fontes enviando apenas caracteres para determinados idiomas, as fontes têm cerca de 44 kB cada. O valor de 168 kB mostrado no momento é para todos os mais de 1.200 glifos como um único download de fonte da web – e a maioria não é necessária para um único site.

Os arquivos de fontes do Ubuntu são convertidos automaticamente no formato correto para diferentes navegadores; dependendo da marca e da versão, o formato necessário é WOFF, ou . A combinação certa de CSS é específica para cada solicitação de página e resolve magicamente esse difícil problema.EOTSVGTTF

Usando @font-face

Você pode incorporar as fontes do Ubuntuconvertendo-osparaFontes WOFF. Você pode então incorporá-los usando a declaração CSS @font-face. As fontes (arquivos .ttf) podem ser encontradas em /usr/share/fonts/truetype/ubuntu-font-family.

Por exemplo, para usar a fonte Ubuntu Regular, convertida em um arquivo WOFF, Ubuntu-R.woff, use este código CSS:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

Da mesma forma para Ubuntu Bold:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu Itálico:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu Negrito Itálico:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

Isto é apoiado por todosnavegadores recentes.

Considerações

Lembre-se de que alguns usuários configuram seus navegadores para usar um conjunto específico de fontes e podem ficar incomodados se fontes personalizadas forem usadas. Além disso, leia oLicença de fonte Ubuntupara termos exatos sobre como a fonte pode ser distribuída.

Answer

Existem 2 métodos com os quais você pode incorporar a fonte Ubuntu em seu site - usando o Google Font Directory (preferencial) ou usando a @font-facedeclaração CSS e convertendo suas fontes manualmente.

Usando fontes da Web do Google

Agora você pode usar a fonte Ubuntu como fonte da web do Google. Isso tornará o processo muito mais simples. A maior parte do conteúdo desta parte da resposta vem deresposta de Sladen.

Por que usar a API Google Font é o método preferido?

Usar a API Google Font é uma excelente sugestão, pois permite que as webfonts funcionem automaticamente em todos os navegadores modernos sem se preocupar com os detalhes. Usar a API de fontes significa que os visitantes sempre verão omais recenteversão do tipo de letra automaticamente.

Como posso usar a API de fontes do Google?

Desde 21 de dezembro de 2010, a família de fontes Ubuntu agora está incluída e pode ser implantada a partir da API de fontes do Google, visite:

font.ubuntu.com/web

Você pode lera postagem do Google Web Fontsobre as notícias e então:

Abra o diretório de fontes do Google: "Ubuntu - Use esta fonte" página
Marque a combinação depesos e estilosentre Regular, Itálico, Negrito e Negrito-Itálico que você precisa para sua página da web.
Se o padrão estiver incorreto, selecione ocombinação de idioma/scriptvocê precisa: um site russo com exemplos em inglês pode usar "Cirílico, Latino".
Adicione a <link>tag fornecida <head> ... </head>em sua página HTML ou modelos e adicione o código CSS apropriado entre <style> ... </style>as tags em seu arquivo <head>.

Por exemplo, se você estivesse criando o site híbrido russo/inglês e quisesse usar a fonte como padrão para todo o texto, você poderia adicionar o seguinte código entre suas <head>tags:
```
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
    body {
        font-family : 'Ubuntu', sans-serif;
    }
</style>
```

Notas:

"Latim" é oroteiroem que o inglês e muitas outras línguas europeias e africanas são escritas.

"Subsetting" otimiza os arquivos de fontes enviando apenas caracteres para determinados idiomas, as fontes têm cerca de 44 kB cada. O valor de 168 kB mostrado no momento é para todos os mais de 1.200 glifos como um único download de fonte da web – e a maioria não é necessária para um único site.

Os arquivos de fontes do Ubuntu são convertidos automaticamente no formato correto para diferentes navegadores; dependendo da marca e da versão, o formato necessário é WOFF, ou . A combinação certa de CSS é específica para cada solicitação de página e resolve magicamente esse difícil problema.EOTSVGTTF

Usando @font-face

Você pode incorporar as fontes do Ubuntuconvertendo-osparaFontes WOFF. Você pode então incorporá-los usando a declaração CSS @font-face. As fontes (arquivos .ttf) podem ser encontradas em /usr/share/fonts/truetype/ubuntu-font-family.

Por exemplo, para usar a fonte Ubuntu Regular, convertida em um arquivo WOFF, Ubuntu-R.woff, use este código CSS:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

Da mesma forma para Ubuntu Bold:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu Itálico:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu Negrito Itálico:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

Isto é apoiado por todosnavegadores recentes.

Considerações

Lembre-se de que alguns usuários configuram seus navegadores para usar um conjunto específico de fontes e podem ficar incomodados se fontes personalizadas forem usadas. Além disso, leia oLicença de fonte Ubuntupara termos exatos sobre como a fonte pode ser distribuída.

Question 2

Usar a API Google Font é uma excelente sugestão, pois permite que as webfonts funcionem automaticamente em todos os navegadores modernos sem se preocupar com os detalhes. Usar a API de fontes significa que os visitantes sempre verão omais recenteversão do tipo de letra automaticamente.

Desde 21 de dezembro de 2010, a família de fontes Ubuntu agora está incluída e pode ser implantada a partir da API de fontes do Google, visite:

font.ubuntu.com/web

Você pode lera postagem do Google Web Fontsobre as notícias e então:

Abra o diretório de fontes do Google: "Ubuntu - Use esta fonte" página
Marque a combinação depesos e estilosentre Regular, Itálico, Negrito e Negrito-Itálico que você precisa para sua página da web.
Se o padrão estiver incorreto, selecione ocombinação de idioma/scriptvocê precisa: um site russo com exemplos em inglês pode usar "Cirílico, Latino".
Copie e cole oduas linhas de CSSnas seções <head> ... </head>e <style>...</style>da sua página HTML ou modelos.

Notas:

"Latim" é oroteiroem que o inglês e muitas outras línguas europeias e africanas são escritas.

"Subsetting" otimiza os arquivos de fontes enviando apenas caracteres para determinados idiomas, as fontes têm cerca de 44 kB cada. O valor de 168 kB mostrado no momento é para todos os mais de 1.200 glifos como um único download de fonte da web – e a maioria não é necessária para um único site.

Os arquivos de fontes do Ubuntu são convertidos automaticamente no formato correto para diferentes navegadores; dependendo da marca e da versão, o formato necessário é WOFF, ou . A combinação certa de CSS é específica para cada solicitação de página e resolve magicamente esse difícil problema.EOTSVGTTF

Answer

Usar a API Google Font é uma excelente sugestão, pois permite que as webfonts funcionem automaticamente em todos os navegadores modernos sem se preocupar com os detalhes. Usar a API de fontes significa que os visitantes sempre verão omais recenteversão do tipo de letra automaticamente.

Desde 21 de dezembro de 2010, a família de fontes Ubuntu agora está incluída e pode ser implantada a partir da API de fontes do Google, visite:

font.ubuntu.com/web

Você pode lera postagem do Google Web Fontsobre as notícias e então:

Abra o diretório de fontes do Google: "Ubuntu - Use esta fonte" página
Marque a combinação depesos e estilosentre Regular, Itálico, Negrito e Negrito-Itálico que você precisa para sua página da web.
Se o padrão estiver incorreto, selecione ocombinação de idioma/scriptvocê precisa: um site russo com exemplos em inglês pode usar "Cirílico, Latino".
Copie e cole oduas linhas de CSSnas seções <head> ... </head>e <style>...</style>da sua página HTML ou modelos.

Notas:

"Latim" é oroteiroem que o inglês e muitas outras línguas europeias e africanas são escritas.

"Subsetting" otimiza os arquivos de fontes enviando apenas caracteres para determinados idiomas, as fontes têm cerca de 44 kB cada. O valor de 168 kB mostrado no momento é para todos os mais de 1.200 glifos como um único download de fonte da web – e a maioria não é necessária para um único site.

Os arquivos de fontes do Ubuntu são convertidos automaticamente no formato correto para diferentes navegadores; dependendo da marca e da versão, o formato necessário é WOFF, ou . A combinação certa de CSS é específica para cada solicitação de página e resolve magicamente esse difícil problema.EOTSVGTTF

Question 3

A renderização de fontes do lado do servidor (talvez melhor "renderização de fontes dinâmicas") tem sido uma questão interessante há muito tempo.

Tecnicamente, parece lógico que, para que uma máquina exiba uma fonte específica, ela já deva estar instalada localmente.

Por outro lado, o web design perde muito por ter que se ater às 'fontes web' básicas/conhecidas.

CSS2.1 fez algumas melhorias usando@Tipo de letraregradeclaração.
Ainda não se tornou um padrão, mas eventualmente se tornará com CSS3.

Além disso, existem alguns métodos alternativos, como:

Espero que os links fornecidos lhe dêem uma ideia melhor do que pode ser feito ;-)

Answer

A renderização de fontes do lado do servidor (talvez melhor "renderização de fontes dinâmicas") tem sido uma questão interessante há muito tempo.

Tecnicamente, parece lógico que, para que uma máquina exiba uma fonte específica, ela já deva estar instalada localmente.

Por outro lado, o web design perde muito por ter que se ater às 'fontes web' básicas/conhecidas.

CSS2.1 fez algumas melhorias usando@Tipo de letraregradeclaração.
Ainda não se tornou um padrão, mas eventualmente se tornará com CSS3.

Além disso, existem alguns métodos alternativos, como:

Espero que os links fornecidos lhe dêem uma ideia melhor do que pode ser feito ;-)

Usando fontes da Web do Google

Responder1

Usando fontes da Web do Google

Usando @font-face

Considerações

Responder2

Responder3

informação relacionada