3

A pergunta é bem simples e objetiva, eu quero ter um estilo de fonte para o parágrafo e outro estilo que fonte para as aspas, porém quando eu coloco o conteúdo entre a tag <q> o que está dentro pega o font-family do <q> e perde o font-family do <p>.

Para fica mais claro veja o exemplo.

p {
  font-size: 32px;
  font-family: serif;
}
q {
  font-family: sans-serif;
}
<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

A parte do texto que está envolvida pelas tag <q> fica com o font-family diferente do <p>, mas eu quero só as aspas e não o texto inteiro de dentro da tag

Não quero usar aspas direto no corpo do texto, tem que ser com a tag <q>, isso não teria valor ok ... "texto" ...

Como posso resolver esse problema de forma semântica usando a tag <q> e de forma que eu possa reutilizar em outras partes do texto?

4
  • Eu não sei o que isso tem haver com semantica e sinceramente fiquei com dificuldade de entender o enunciado ... mas supeito que você deseja isto q { quotes: "«" "»" "‹" "›"; } (é só um exemplo), entendi certo?
    – Syzoth
    Commented 6/09/2018 às 19:28
  • @GuilhermeNascimento Na verdade é que teoricamente a ta <q> seria a tag para quote correto?Para o leitor de tela entender que está entre aspas e não usar "texto" e sim <q>texto</q> entende. Acho que posso ter me expressado mal, o que quero dizer é que seria obrigatório usar a tag <q> para colocar o conteúdo dentro. E tem mais a ver com o font-family e não com o tipo de aspas.
    – hugocsl
    Commented 6/09/2018 às 19:34
  • 2
    Não tem como afirmar que um leitor de tela vá reconhecer <q> ou " ou ', isso é especulação, existem diferentes leitores de telas, com funcionamentos variados, suporte ou falta de suporte para certas tags HTML. Eu poderia "presumir" que um bom leitor de tela reconhece todos (<q>, ", '), porque a ideia é de fato ler o texto e nem todo dev é um bom dev para compreender as necessidades de pessoas com deficiencia visual.
    – Syzoth
    Commented 6/09/2018 às 19:36
  • 1
    @GuilhermeNascimento é um ponto de vista bem interessante! Até pq alguns leitores são pagos, e as vezes quem não quer comprar a versão mais nova que de suporte as coisas mais novas pode ficar sujeito a esse tipo de "detalhe".... (não que a tag <q> seja nova)
    – hugocsl
    Commented 6/09/2018 às 19:39

1 Resposta 1

2

Um jeito de fazer isso é definindo o font-family diferenciado somente para os pseudo-elementos after e before da tag q:

p {
  font-size: 32px;
  font-family: serif;
}

q:before {
  content: open-quote;
  font-family: sans-serif;
}
q:after {
  content: close-quote;
  font-family: sans-serif;
}
<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

Com isto, somente as aspas terão a font-family diferente. O conteúdo que está dentro de <q> fica com a mesma fonte do <p>.


Lembrando que se o q tiver regras específicas, os pseudo-elementos também as terão:

p {
  font-size: 32px;
  font-family: serif;
}

/* q com regras específicas, serão aplicadas em before e after */
q {
  color: red;
}
q:before {
  content: open-quote;
  font-family: sans-serif;
}
q:after {
  content: close-quote;
  font-family: sans-serif;
}
<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>

Neste caso, o before e after herdam a cor vermelha definida em q. Caso isso não seja o desejado, bastaria definir uma cor diferente nos pseudo-elementos:

p {
  font-size: 32px;
  font-family: serif;
}

/* q com regras específicas */
q {
  color: red;
}
q:before {
  content: open-quote;
  font-family: sans-serif;
  /* sobrescrever a cor definida em q */
  color: black;
}
q:after {
  content: close-quote;
  font-family: sans-serif;
  /* sobrescrever a cor definida em q */
  color: black;
}
<p>Lorem ipsum dolor sit amet consectetur, <q>adipisicing elit</q>. Ipsum, quas.</p>


Referência: MDN

1
  • 1
    Agradeço pela contribuição
    – hugocsl
    Commented 10/09/2018 às 13:59

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .