Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Texto

Olá pessoal, tudo bem?

Acabei de assistir a aula "Fontes externas" e após ter um pouco de conflito pelo método explicado e para garantir que a fonte seja utilizada mesmo se der algum problema com o endereço externo, decidi importar a fonte e usá-la diretamente no computador (no caso de publicação seria mais um arquivo no servidor).

Escolhi a Montserrat-Regular.ttf.

Para quem se interessar: como eu fiz?

Não precisa alterar nada no html. Copiei o arquivo ttf citado e coloquei na raíz do projeto (junto com o index.html). Já no style.css fiz a seguinte alteração:

@font-face {
    font-family: 'Montserrat';
    src: url("Montserrat-Regular.ttf");
}

body {
    font-family: 'Montserrat', sans-serif;
}

Veja que o que mudou foi que no @font-face você apenas indica o nome família da fonte e depois indica onde o arquivo ttf está. Depois indiquei através do "body" onde seria utilizado, como no método anterior.

Agora a minha dúvida:

Mesmo funcionando, quando eu clico rapidamente entre os links Home, Produtos, Contato o texto do "nav" dá uma leve piscada. Acredito que seja por conta do reset.css.. é algo bem sutil, mas gostaria de resolver isso, alguém sabe como?

Já tirei o "font: inherit" do reset.css, mas não funcionou.

Edit: clicando várias vezes, às vezes acontece e às vezes não. Já perceberam isso?

Agradeço desde já! Bons estudos!

1 resposta
solução!

Olá Ricardo, tudo ok por aí ?

Gostaria de pedir desculpas pela demora em obter um retorno!

Em relação com o seu projeto, primeiramente eu gostaria de lhe parabenizar pela ideia de trazer as fontes externas para dentro do seu projeto, foi uma ideia muito legal e foi bem executada!

Outro ponto também que quero deixar claro é que como eu não tenho acesso à seu projeto nas mesmas condições de uso que você eu não consigo visualizar exatamente o problema que você está tendo, nem realizar testes para poder resolver o problema de forma certeira. Contudo, baseado nas informações que você disponibilizou na descrição de seu tópico, eu posso afirmar que essa “piscada” que você disse que aparece em seu site, aconteceu por conta da configuração do CSS3 de ler e executar os parâmetros e comandos que você coloca ali em na ordem que eles estão escritos, então provavelmente essa “piscada” acontece por ele estar lendo no arquivo de código o que deve ser feito e executando “ao mesmo tempo” que lê. Para explicar melhor porque das aspas é preciso entender um pouco sobre como o computador executa vários programas “ao mesmo tempo”, um breve resumo: Um computador para conseguir executar várias tarefas de uma vez, ele cria uma pequena ilusão de ótica! Um computador ao executar várias tarefas na verdade o que ele está fazendo é lendo um programa e executando ele, mas ele não lê e executa tudo, ele lê um pouco executa um pouco, depois ele parte para outra tarefa lê como ela deve ser feita e executa uma parte e assim ele faz com todas as outras e vai criando uma ilusão de movimento como se todas estivessem sendo realizadas ao mesmo tempo, isso porque ele faz esse processo todo tão rápido que o corpo humano não consegue nem perceber.

Agora entendendo como esse processo acontece é possível afirmar que quando o CSS está lendo um código ele lê e executa na ordem em que o programa foi escrito, contudo ao fazer aquele processo que eu expliquei antes algumas vezes ele pode travar, por inúmeros motivos, então o motivo dessa “piscada” pode ser esse!

E também tem a possibilidade do navegador estar com problemas operacionais, ou a internet pode estar lenta em alguns momentos, ou o computador pode estar muito lotado, ou outros problemas dessa natureza!

E a possibilidade do reset.css gerar isso é baixa, mas não é nula! Contudo o parâmetro font: inherit não é o que está fazendo isso, pois ela de acordo com a documentação a inherit é uma palavra-chave especifica que uma propriedade deve herdar seu valor de seu elemento pai. E a inherit também é uma palavra-chave que pode ser usada para qualquer propriedade CSS e em qualquer elemento HTML.

Deixo abaixo também um material extra que fala sobre o seu problema:

E também fico à disposição em caso de dúvidas!

Um abraço e bons estudos!

Caso este post tenha lhe ajudado, por favor marcar como solução! ✓.