JSFiddle - React, Tailwind, and code Playground

by Ronny

HTML

<h1><strong>כותרת שצריכה להופיע בפונט <em>ללא</em> סריפים</strong></h1>
<h2><strong>כותרת שצריכה להופיע בפונט <em>ללא</em> סריפים</strong></h2>
<h3><strong>כותרת שצריכה להופיע בפונט <em>ללא</em> סריפים</strong></h3>

<h4><strong>אם מגדירים במפורש את הפונט Tahoma הוא כן עובד</strong></h4>

<p><strong>עדכון</strong>: הסיבה היא שכששמים <code>&lt;strong&gt;</code> בתוך כותרת, הפונט מנסה להגיע למשקל bolder, שלא קיים במקרה של Arial ופונטים אחרים. פיירפוקס בוחר להשתמש בפונט אחר שיש לו את המשקל, כרום מסתפק במשקל bold רגיל. מבחינה סמנטית, אין הצדקה להדגשה בתוך כותרת; אם יש, אפשר לקבוע ידנית את המשקל או להדגיש מה שצריך בדרך אחרת.</p>
<cite><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=604991#c10">https://bugzilla.mozilla.org/show_bug.cgi?id=604991#c10</a>
<hr>
<figure>
    <img src="http://content.screencast.com/users/RonnyO/folders/Jing/media/5dc20fe4-cb02-49cd-8824-fc1ea57a6181/expected%20rendering%20of%20heading-strong.png">
    <figcaption>אמור להיראות ככה (כרום)</figcaption>
</figure>

CSS

body {font-family: sans-serif; direction: rtl;}
h1 strong {font-weight: normal;}
h4 strong {font-family: Tahoma;}

figcaption {font-style: italic;}