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

[Dúvida] Dúvida sobre o font-weight

Resolvi colocar o font-family no body do arquivo EstilosGlobais.scss, para alterar tudo de uma vez:

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background-image: linear-gradient(#041833, #154580);
  box-sizing: border-box;
  font-family: "GandhiSansRegular";
}

Acontece que me deparei com uma situação estranha sobre o font-weight que não estou entendendo porque está acontecendo.

No arquivo Menu.module.scss eu comentei as linhas da fonte, porque já tinha colocado no estilos globais, mas o primeiro item da lista tem o font-weight bold, então no scss está 'font-weight: 700', até ai ok, tudo funcionando. Código:

.menu {
  width: 18%;

  &__lista {
    padding-left: 0.5rem;
    margin: 0;
    height: 276px;
    list-style: none;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  }

  &__item {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    &:first-child {
      a {
        font-weight: 700; // ** fica em negrito
        color: #7b78e5;
        // font-family: "GandhiSansRegular"; ** continua com a fonte Gandhi
      }
    }
  }

  img {
    margin-right: 0.5rem;
    width: 25px;
    height: 25px;
    cursor: pointer;
  }

  a {
    text-decoration: none;
    font-size: 1.125rem;
    color: #d9d9d9;
    // font-family: "GandhiSansRegular"; ** continua com a fonte Gandhi
  }
}

A dúvida é no arquivo PaginaInicial.module.scss, porque se eu comentar a linha: 'font-family: "GandhiSansBold"', o texto continua na fonte Gandhi Regular, por estar no body do arquivo global, mas ao adicionar 'font-weight: 700', ela não fica em negrito como no menu. Código:

h1 {
      position: absolute;
      z-index: 1;
      color: #d9d9d9;
      font-size: 2.5rem;
      font-weight: 700; // NÃO fica em negrito
      // font-family: "GandhiSansBold"; ** continua com a fonte Gandhi
      width: 401px;
      height: 144px;
      top: 75px;
      left: 44px;
    }

Resumindo a dúvida: porque o "font-weight: 700" funciona no Menu.module.scss e não no PaginaInicial.module.scss?

1 resposta
solução!

Olá, Rafael! Como vai?

Pelo que entendi, você está com uma dúvida sobre o uso do font-weight nos arquivos Menu.module.scss e PaginaInicial.module.scss. No arquivo Menu.module.scss, você definiu o font-weight como 700 para o primeiro item da lista e ele está funcionando corretamente, deixando o texto em negrito. No entanto, no arquivo PaginaInicial.module.scss, ao adicionar o font-weight como 700, o texto não fica em negrito.

Uma possível explicação para isso é que a fonte "GandhiSansRegular" que você definiu no arquivo de estilos globais (EstilosGlobais.scss) não possui uma variação em negrito. Portanto, mesmo que você defina o font-weight como 700 no arquivo PaginaInicial.module.scss, o texto não ficará em negrito, pois a fonte utilizada não possui essa variação.

Para resolver esse problema, você pode utilizar uma fonte que possua uma variação em negrito, como por exemplo a "GandhiSansBold". Assim, no arquivo PaginaInicial.module.scss, você pode descomentar a linha font-family: "GandhiSansBold"; e o texto ficará em negrito.

Espero ter esclarecido sua dúvida! Se tiver mais alguma pergunta, é só me dizer. Bons estudos!

Espero ter ajudado e bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software