0

Vuetify 3 offers several classes to style font in different weights of bold and italic. But there does not seem to be a class that is equivalent to the CSS directive "font-style: normal;"

See the docs here: https://next.vuetifyjs.com/en/styles/text-and-typography/

Am I missing something?

Why do you need this, you might ask. Let me explain: I try write semantic HTML and thus I'm using em to highlight important words or phrases. But em is styled as italic on most browsers by default. I want to style it bold and colored instead, but not italic. So I need to overwrite this default style.

Is there any way to do this with Vuetify classes or is plain CSS the way to go here?

Fred
  • 1,103
  • 2
  • 14
  • 35
  • 1
    Why don't you use the `` tag for this instead? Alternatively just do it using CSS – Bernard Borg Jan 26 '23 at 22:22
  • I did indeed expect `` as the first recommendation. `` is better than expected, because it is indeed semantic. But it has a different meaning, I don't want blind people to be yelled at by their screen reader. So, no, this is not the solution I am looking for. And none of those solutions would answer my question about Vuetify. – Fred Jan 26 '23 at 22:28
  • I think `"font-weight-regular"` is what you want... but Vuetify classes aren't going to be higher priority than ``. I can't say I understand why you want to override the standard implementation of `` and not use `` but you can do so with CSS: `em { font-style: normal }` (or bold, or whatever, I'm not entirely clear on your end goal) – yoduh Jan 26 '23 at 22:33
  • Unfortunately `font-weight-regular` does not affect the italic styling, only the boldness. But apart from than, styles should always over-write the browser-default, no matter where they come from. Browser-default styles are just a convention vendors came up with. – Fred Jan 26 '23 at 22:39
  • Here's why I don't want to use ``: https://www.w3docs.com/snippets/html/what-is-the-difference-between-b-and-strong-i-and-em-tags.html Here's another article that explains the differences: https://www.w3docs.com/snippets/html/what-is-the-difference-between-b-and-strong-i-and-em-tags.html TL;DR: the words I emphasize are just not critical enough to use ``. – Fred Jan 26 '23 at 22:41
  • If the ultimate goal is to give strong importance to the text, then maybe instead of using semantic HTML, you can use the `p` tag and give it the Vuetify classes, 'font-weight-bold'. A strong tag has a weight of 900 (not very sure), which `font-weight-bold` can also give. – Neha Soni Jan 30 '23 at 05:05
  • 1
    This won't have any effect on screen readers, so this is not what I'm looking for. – Fred Jan 30 '23 at 09:30
  • 1
    As you've identified, there's not a way to do it only in Vuetify. You should use whatever element you think is most semantic, and then override styles as-needed using plain CSS. – Sean Feb 01 '23 at 16:19

0 Answers0