Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Arthur.l.f

CSS Não consigo mudar a fonte do h1 (HTML - CSS)

Recommended Posts

Bom, quero mudar o título mas não estou conseguindo. Estou assistindo umas vídeo aulas, e parei em um ponto onde não consigo trocar a fonte do h1. 

Usei o método de pegar uma fonte externa do Google, e interna com a propriedade @font-face.

 

Agora tentei passei o h1 para h2 e, o que estava como h2 para h3 e funcionou, alguém sabe me explicar, por favor?

 

Aqui estão os códigos do HTML e do CSS:

 

HTML:

  

  <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Tudo sobre Google Glass</title>
    <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet">
    <link rel="stylesheet" href="_css/estilo.css">
    
</head>
<body>
    <div id="interface">
    
        <header id="cabecalho">
            <hgroup>
                <h1>Google Glass</h1>
                <h2>A revolução do Google está chegando</h2>
            </hgroup>

 

 

CSS:

body{
    background-color: #dddddd;
    color: rgba(0,0,0,1);
}
#cabecalho{
     border-bottom: 1px #606060 solid;
     height: 150px;
     background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}
#cabecalho h2{
    font-family: 'Bubblegum Sans', cursive;
    font-size: 30pt;
    color: #888888;
    font-size: 15pt;
    margin-top: 0px;
    padding: 0px;
}    
#cabecalho h1{
    font-family: 'Bubblegum Sans', cursive;
    margin-bottom: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6)
    padding: 0px;
}

 

Editado por DiF
Botão CODE deve ser usado para postar os códigos

Compartilhar este post


Link para o post
Compartilhar em outros sites

Se eu não estiver enganado:

 

 <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet">
 <link rel="stylesheet" href="_css/estilo.css">

 

Você citou a font-family no h1 do estilo.css?

 

Ou pode ser simplesmente o .html dando preferência ao estilo.css por ser um arquivo da pasta enquanto o outro é referenciado da internet.

  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
4 horas atrás, lucsilva disse:

Se eu não estiver enganado:

 

 <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet">
 <link rel="stylesheet" href="_css/estilo.css">

 

Você citou a font-family no h1 do estilo.css?

 

Ou pode ser simplesmente o .html dando preferência ao estilo.css por ser um arquivo da pasta enquanto o outro é referenciado da internet.

Está desse jeito aqui olha:

#cabecalho h2{
    font-family: bubblegum sans, cursive;
    font-size: 30pt;
    color: #606060;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6)
    padding: 0px;
    margin-bottom: 0px;
}
#cabecalho h3{
    font-family: arial, sans-serif;
    color: #888888;
    font-size: 15pt;
    padding: 0px;
    margin-top: 0px;

}

 

Obs.: Ali onde está o h2 era o h1, depois de horas tentando fazer funcionar, só consegui mudar a fonte após alterar de h1 para h2. 

 

Mas o que eu quero entender é o porque de o h1 não funcionar... Só funcionou a partir do h2.

Editado por DiF
Usar o botão CODE <>

Compartilhar este post


Link para o post
Compartilhar em outros sites
1 minuto atrás, Matheus Evandro Rech disse:

você tentou criar com o css interno ?

Como assim?

Você diz usar os códigos do css junto com os códigos do html?

 

Se for isso, nem sei como faço kk

Compartilhar este post


Link para o post
Compartilhar em outros sites

eu dei uma olhada e coloquei com o css interno,

ficou assim:

 <!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Tudo sobre Google Glass</title>
<style>
body{
    background-color: #dddddd;
    color: rgba(0,0,0,1);
}
#cabecalho{
     border-bottom: 1px #606060 solid;
     height: 150px;
     background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}
#cabecalho h2{
    font-family: 'Bubblegum Sans', cursive;
    font-size: 30pt;
    color: #888888;
    font-size: 15pt;
    margin-top: 0px;
    padding: 0px;
}    
#cabecalhoh1{
    font-family: 'Bubblegum Sans', cursive;
    margin-bottom: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6)
    padding: 0px;
}

</style>

</head>
<body>
    <div id="interface">
    
        <header id="cabecalho">
            <hgroup>
                <h1 id="cabecalhoh1">Google Glass</h1>
                <h2>A revolucao do Google esta chegando</h2>
            </hgroup>

Não sei se era assim que você queria mais no meu mudou a fonte

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Qual editor de código você está usando? O seu código está aplicando a fonte corretamente tanto no <h1> quanto no <h2> de acordo com a sintaxe do CSS, mas aparentemente a indentação com espaços ou caracteres em branco está causando problemas.

 

Segue o código funcionando:

 

HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Tudo sobre Google Glass</title>
    <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet">
    
</head>
<body>
    <div id="interface">
    
        <header id="cabecalho">
            <hgroup>
                <h1>Google Glass</h1>
                <h2>A revolução do Google está chegando</h2>
</hgroup>

CSS:

body {
  background-color: #ddd;
  color: rgba(0,0,0,1);
}
#cabecalho {
  border-bottom: 1px #606060 solid;
  height: 150px;
  background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}

#cabecalho h2 {
  font-family: 'Bubblegum Sans', cursive;
  font-size: 30pt;
  color: #888888;
  font-size: 15pt;
  margin-top: 0px;
  padding: 0px;
}

#cabecalho h1 {
  font-family: 'Bubblegum Sans', cursive;;
  margin-bottom: 0px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
  padding: 0px;
}

Pré visualização (JSFiddle):

 

8ZhjxjD.png

 

Sempre que acontecer esse tipo de problema, use as ferramentas de desenvolvedor do seu navegador e cheque o elemento que está com problema, se é no CSS, observe a parte de estilos que vai indicar o problema.

Editado por navegantenarede
Link do JSFiddle atualizado, ordem do código mantida para o OP
  • Curtir 1
  • Obrigado 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Amigo, o problema não é o css. Você referenciou errado. Você informou pro HTML qual a relação do link do google fonts, mas não o que ele deve representar.

 

Utilize:

 

<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 

(exemplo)

 

e referencia no css:

 

font-family: 'Open Sans', sans-serif;

 

Editado por DiF
Botão CODE <> deve ser usado para fragmento de códigos ou códigos completos

Compartilhar este post


Link para o post
Compartilhar em outros sites

css interno é quando no <head> você cria <style> e coloca o css assim

<style>
body{
    background-color: #dddddd;
    color: rgba(0,0,0,1);
}
#cabecalho{
     border-bottom: 1px #606060 solid;
     height: 150px;
     background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}
#cabecalho h2{
    font-family: 'Bubblegum Sans', cursive;
    font-size: 30pt;
    color: #888888;
    font-size: 15pt;
    margin-top: 0px;
    padding: 0px;
}    
#cabecalhoh1{
    font-family: 'Bubblegum Sans', cursive;
    margin-bottom: 0px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.6)
    padding: 0px;
}

</style>

dai por exemplo:

você queira mudar o h1 você coloca assim

 <h1 id="cabecalhoh1">Google Glass</h1>

o id vai puxar as configurações que você mudou no style assim você nao precisa criar um arquivo separado .css

ou se você quiser mudar o h2 você muda la no nome do style

 

h2#cabecalhoh2{

as informaçoes que você queira

}

 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@lucsilva, ele referenciou de forma correta sim, como está indicado no Google Fonts, veja aqui.

 

 

 

 

Editado por DiF
Não dê uma de moderador sem de fato ser. Peço que quando acontecer isso, use o botão da denúncia

Compartilhar este post


Link para o post
Compartilhar em outros sites
6 minutos atrás, navegantenarede disse:

Qual editor de código você está usando? O seu código está aplicando a fonte corretamente tanto no <h1> quanto no <h2> de acordo com a sintaxe do CSS, mas aparentemente a indentação com espaços ou caracteres em branco está causando problemas.

 

Segue o código funcionando:

 

HTML:


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8"/>
    <title>Tudo sobre Google Glass</title>
    <link href="https://fonts.googleapis.com/css?family=Bubblegum+Sans" rel="stylesheet">
    
</head>
<body>
    <div id="interface">
    
        <header id="cabecalho">
            <hgroup>
                <h1>Google Glass</h1>
                <h2>A revolução do Google está chegando</h2>
</hgroup>

CSS:


body {
  background-color: #ddd;
  color: rgba(0,0,0,1);
}
#cabecalho {
  border-bottom: 1px #606060 solid;
  height: 150px;
  background: url(../_imagens/glass-logo-peq.jpg) no-repeat 0px 80px;
}

#cabecalho h1 {
  font-family: 'Bubblegum Sans', cursive;;
  margin-bottom: 0px;
  text-shadow: 1px 1px 1px rgba(0,0,0,0.6);
}

#cabecalho h2 {
  font-family: 'Bubblegum Sans', cursive;
  font-size: 30pt;
  color: #888888;
  font-size: 15pt;
  margin-top: 0px;
  padding: 0px;
}

Pré visualização:

 

8ZhjxjD.png

 

Sempre que acontecer esse tipo de problema, use as ferramentas de desenvolvedor do seu navegador e cheque o elemento que está com problema, se é no CSS, observe a parte de estilos que vai indicar o problema.

Estou usando o Sublime Text. Neste momento estou tentando montar o quebra-cabeças aqui kk, já atualizo se deu certo.

Compartilhar este post


Link para o post
Compartilhar em outros sites

@navegantenarede Então, eu mexi aqui, fechei e abri o editor, modifiquei os arquivos, e deu certo. Só não sei ainda qual era o verdadeiro problema, possivelmente era algum erro de indentação ou no editor mesmo. 

 

Agora o #cabecalho h1 está funcionando normalmente.

Editado por Arthur.l.f

Compartilhar este post


Link para o post
Compartilhar em outros sites

@Arthur.l.f , o Sublime Text é um excelente editor, mas é bom ficar bem atento à sintaxe do CSS. No seu post original, parecia estar faltando um semicolon na linha:

text-shadow: 1px 1px 1px rgba(0,0,0,0.6)

E logo após vinha a linha com o padding:

padding: 0px;

Fora isso, havia apenas o problema da indentação, que pode ter sido resultado da cópia pelo fórum. 

 

De toda forma, é sempre bom conferir esses detalhes que podem causar problemas e fazer com que as regras do CSS não funcionem, e checar também com as ferramentas de desenvolvedor, que vai te apontar para a solução.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário






Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×