HTML and CSS provide the function of italicized text, just like italicized words like this. Let's learn all you need to know together.

What is italic text? Why use italic text?

You usually use italic text to attract attention, emphasize a word or phrase, and allow the reader to give it extra attention when reading. Alternatively, it may also follow specific style guides, such as italicized titles, such as published post titles.

use<em></em> Label

"em" in the em tag literally means "emphasis" (emphasis). Browser will be included in HTML by default<em></em> Italicizes the text in the label.

<p>
  It was a <em>great</em> party, Bebe.
</p>

Imagine the tone of this sentence, the reader emphasizes that word, giving the sentence a different feeling than when it is not emphasized.

use<i></i> Label

<i></i> Elements are used to italicize text, but do not imply emphasize. It simply distinguishes certain texts from others visually without suggesting that the reader should give extra attention to these words. For example:

<p> <i>Miranda thought:</i> An interesting metaphor about the global economy.</p>
<p><i>Chris thought to himself:</i> Is that mustard?</p>

<em></em> and<i></i> What is the difference between?

Again:

• <em></em> Used to emphasize
• <i></i> Used for italic text, but not emphasized

If you want to use italics for the title, for example:

<p>
  This book <i>Mr. Penumbra's 24-hour bookstore</i>   very good.
</p>

<p>
  This book <cite>Mr. Penumbra's 24-hour bookstore</cite>
  very good.
</p>

Fortunately, the browser will be like<i></i> Will be included in<cite></cite> The content in the tag is italicized, so if you quote a work (such as<cite>白鯨記</cite>) or a publication (such as<cite>紐約時(shí)報(bào)</cite>), there is no additional action required.

Use your own HTML classes and CSS

If the goal is to visually distinguish text, then we don't have to use<i></i> element. The span tag has no semantic meaning, and can be styled to achieve visual emphasis:

<p>
  Shoes are on sale this week!
</p>

.emphasis {
  background: lightyellow;
  font-style: italic;
}

The CSS property font-style is a necessary property for you to make text italics, which you can apply to any selector you like.

Pay attention to "pseudo italics"

Not all fonts have italic characters. Or, you may be in a situation where the font italic version is not loading. In both cases, the browser will try to fake it , which almost always looks bad (or at least much worse than using the actual italic font).

Nothing warns you about this—you just need to pay attention to it. Here is an example of a Merriweather font pseudoitalic:

Unicode italics

Unicode provides numeric characters, including letters with italic style.

You might use italic text when you need italic text without HTML control, such as when writing a tweet on Twitter.

It has poor accessibility. It will handle character by character, which makes it difficult (for me) to understand the word. Be very careful when using it, and it is even better to avoid using it altogether.

Italics in variable fonts

This is a slightly advanced concept, but there are so-called variable fonts. They provide customization in the browser. So instead of using a second font file for bold versions, include information inside them so that one file will bold itself. "Bold" is just one example of the functionality that variable fonts may provide. Not all variable fonts must have this feature.

Variable fonts may have "tilt" or "italic" options, which you can apply this look in this way.

The above are five different answers about when to use italic text. Hope this will also help you with the next logical question: Which method should I use?

The above is the detailed content of How to Italicize Text. For more information, please follow other related articles on the PHP Chinese website!