Então, este vídeo vai se concentrar em fontes no sucesso e, obviamente, se divertir e escolher fontes para uma
página da web é realmente muito importante.
Mas também vamos cobrir muitas outras propriedades relacionadas a fontes e ao texto.
E essas são fonte de fontes tamanho da fonte tamanho da fonte linha de altura texto uma linha e decoração de texto.
Então, neste vídeo, vamos parar e cobrir todos esses.
E a primeira coisa que vamos fazer é obter o nosso texto simples que vamos usar.
Então eu tenho um Funk simples que é Jim M-file e vou seguir em frente e adicionar na sua boca.
Então eu vou fazer uma H-1 para que possamos ver um cabeçalho e um estilo.
E depois alguns parágrafos.
Então, eu vou chamar a página de demonstração desta fonte e, em seguida, a próxima coisa, em vez de apenas
digitar algumas palavras aleatórias ou algumas críticas como essa, que realmente não refletem realmente a aparência
da língua inglesa em uma página.
Eu vou usar um gerador Lorem Epsom.
Então, para aqueles que não sabem que os geradores Lorem Ipsum são usados ​​para gerar um monte de texto aleatório que
são palavras em inglês.
Isso não significa nada, mas, pelo menos, parece palavras reais.
Portanto, é o texto do espaço reservado.
Então eu tenho um tipo de artigo engraçado aberto de 10 dos melhores ou mais divertidos geradores de Lorem Ipsum
para web designers.
E eu irei com este primeiro bacon ipsum, então vou gerar alguns parágrafos aqui.
Rápido.
Me dê bacon e você pode vê-lo, apenas me dê algum texto.
Mas este é um texto real que realmente parece um potencial, você sabe algo que você teria em
um site.
Não parece apenas um jibberish como este.
Então, é uma melhor representação de uma fonte.
Então eu vou seguir em frente e colar isso.
Eu vou fazer dois parágrafos sobre isso.
Tudo bem.
E vamos deixar isso por enquanto e vamos voltar e adicionar um pouco mais tarde.
Vamos abrir isso e ver o que temos.
ESTÁ BEM.
Então, aqui está um site que iremos denominar e a primeira coisa que queremos fazer é falar sobre
como, na verdade, simplesmente atribuímos uma fonte a qualquer coisa.
E antes que possamos fazer isso, temos que falar sobre o tipo de fonte que ainda temos disponível no navegador.
Portanto, não há uma resposta fácil sobre quais fontes um computador está disponível no navegador.
E é porque eles são diferentes em cada máquina.
E eu tenho este site aberto aqui.
Ela diz pilha de fontes.
Isso realmente mostra dependendo se você estiver em um Mac ou Windows.
Qual é a porcentagem dessas máquinas que têm uma fonte específica.
E isso é apenas um tipo de fontes padrão da web que veremos o maior tempo.
Então, se olharmos para um como Helvetica, você pode ver que todos os Mac têm a América, mas muito poucos
Windows instalados.
E estas são as fontes do sistema que aparecem em uma máquina.
Portanto, essas não são as únicas fontes que você pode usar, mas estas são algumas das apostas mais seguras.
Então, se você quisesse um que ele sabia com certeza trabalharia em cada máquina que você escolheria
como Arial preto ou aéreo.
Obviamente, essas fontes são bastante limitadas.
Então, vamos ver como realmente incluímos fontes personalizadas mais tarde neste vídeo.
Mas, por enquanto, vamos escolher um desses.
Então, vamos com Ariel Sharon Ariel.
Então, para usar isso, vamos atribuir isso aos nossos parágrafos aqui.
Então, vamos entrar no meu C S S, que eu liguei aqui.
Estilos que C S S e a propriedade são chamados de família de fontes.
Então eu vou selecionar parágrafos e vou dizer que a família de fontes é Arial assim.
E se eu atualizar, você verá que agora tenho fonte Arial aqui.
Uma nota rápida eu também posso colocar citações sobre isso que é totalmente válido.
Às vezes você terá que fazer isso se você tiver uma fonte que tenha um número no início.
Não que esta seja uma fonte real, mas se fosse isso, eu teria que colocar cotações em torno dela
porque esta não é uma linha CSSA válida.
OK para que eu possa dar isso a Aeriel assim e você pode ver a Aeriel.
Então, existem outras fontes com as quais você pode brincar.
Vamos tentar a Geórgia.
Então, vamos dar a
nossa H-1 Georgia exatamente como essa atualização.
E você pode vê-lo mudar de fonte, então não se desespere se você é designer.
Nós vamos ver como usar muito mais fontes e como incluir as personalizadas.
Mas, por enquanto, só nos concentraremos nas fontes padrão do sistema, que são um pouco limitadas.
E, mesmo assim, não há garantia, pois você pode ver que não há nenhuma que 100 por cento das máquinas tenham, então a próxima
propriedade da qual eu quero falar é o tamanho da fonte, então o tamanho da fonte parece que ele controla o tamanho
da fonte ou a pequena dimensão A fonte é de um determinado elemento.
Então, podemos selecionar algo e vamos fazê-lo para o nosso H-1 e vamos fazer cada um muito maior.
Então, fazemos o tamanho da fonte e existem diferentes unidades que podemos usar.
E o primeiro é chamado de pixels ou picos e já o vimos um pouco antes com o Forder.
Então, vamos apenas dar algo de enorme como 200 fotos e se voltarmos para o navegador, você pode
ver se conseguimos essa diversão gigantesca de 200 pixels, o que podemos fazer, por exato.
Se você quer brincar com tamanhos de fonte, não tem certeza de quão grande você quer que isso seja.
85 ou
o que quer que desejamos e podemos brincar no navegador e vê-lo A mudança refletiu imediatamente.
Nós podemos inspecioná-lo e então podemos ir até aqui e podemos clicar nisso e podemos alterar esse número para que possamos mudar
para 100 ou 60 ou
Então, esse é um recurso muito bom quando você está jogando com tamanhos de fonte.
Então, como mencionei, porém, essa não é a única maneira de escolher um tamanho de fonte.
Não é a única unidade.
Há outra unidade popular chamada IEMs e E-M é basicamente um tamanho de fonte relativo.
Então eu vou seguir em frente e abrir o tamanho da fonte M. ler daqui por um momento o tamanho de um valor EM
é dinâmico e EM é igual ao tamanho da fonte que se aplica ao pai do elemento em questão .
D e página e vá para a seção EM e vou
Então o que isso realmente significa é que eu vou mostrar um exemplo rápido.
Se eu colocar, vamos dentro daqui debaixo do bife de tira Eu vou colocar um elemento de extensão em tudo o que um espaço
faz.
Esta é provavelmente a nossa primeira vez que os vemos.
É apenas uma maneira de agrupar texto em conjunto, sem realmente fazer a diferença visual, por isso é apenas uma maneira
de fazer um elemento em torno da palavra strip steak.
Mas se eu atualizar.
Nada muda.
Bem, a busca do tamanho da fonte, mas nada muda aqui e onde eu tenho essa extensão.
Então é uma maneira de destacar ou selecionar uma linha e depois fazer algo com isso.
E nós vamos fazer isso muito mais grande.
Então, usamos um E-M ou usamos as unidades E-M e estamos se quisermos fazer isso o dobro do tamanho
da fonte deste parágrafo que acabamos de entrar aqui.
Então, espere e depois digamos o tamanho da fonte 2. 0 E-M e, assim, será o dobro do tamanho da fonte do elemento
inclusivo do elemento pai que é este parágrafo.
Então, você verá que aqui se eu atualizar este intervalo é o dobro do tamanho da fonte deste.
Mas na verdade, na verdade, não explicamos o número de pixels para fazê-lo.
Só sabia o quão grande era isso e depois dobrou.
Então, isso é dinâmico, e é por isso que muitas pessoas gostam disso é que, se por algum
motivo eu precisava mudar o tamanho da fonte, isso mudaria automaticamente.
Então, deixe-me mostrar-lhe outro exemplo.
Vamos aumentar o tamanho da fonte do
tamanho da fonte do parágrafo e vamos fazer 40 pixels e você pode ver que isso ainda permanece duplo.
Então, a única pergunta sobre o E-M que surge muito é qual é o valor inicial de v e qual
é o nível superior.
Porque não podemos simplesmente seguir herdando de um pai e esse pai, tem que haver alguma fonte de verdade.
Tem que haver como no elemento de nível superior que realmente tem um tamanho de fonte e que realmente
muda dependendo do navegador que seja um pouco frustrante.
Mas, de acordo com a SDN, geralmente tem cerca de 16 pixels, de modo que não há garantia, mas geralmente é de cerca de
16 pixels.
Então, o que a maioria das pessoas faria é definir um tamanho de fonte no corpo no início.
Então, algo parecido com esse tamanho de fonte do corpo.
E vamos dar um vamos fazer algo realmente pequeno para começar como 10 pixels e então deve
mudar ou cada um para que seja cinco vezes maior do que o corpo.
Então, isso vai parecer cinco porno E-M e então vamos no nosso parágrafo para ser duas vezes maior do que
o corpo.
Então, 2. 0 E-M.
E, finalmente, queremos que nossa extensão seja duas vezes maior do que um parágrafo.
Então, isso também é 2. 0 porque lembre-se que está aninhado dentro.
Então, vamos fazer algum texto fora de um parágrafo assim e você verá que é muito pequeno.
E então, fizemos isso cinco vezes maior do que isso.
Fizemos isso duas vezes maior.
E isso é duas vezes maior do que o parágrafo