サイト上にwindwosでもバックスラッシュを表示させたいとき

\ 今だけお得! /

のようにバックスラッシュとスラッシュを組み合わせてフレーズを強調させるケースがあるかと思います。
ちゃんと対策していない場合windowsで表示すると

¥ 今だけお得! /

のように円マークで表示されることがあります。
こういうケースでwindowsでもちゃんとバックスラッシュを表示させる方法をいくつか。

１．バックスラッシュを表示可能なフォントを使用

一番オーソドックスな方法だと思います。
Noto Sans Japaneseのようにwindows環境でもバックスラッシュが表示可能なフォントを使えば問題なく表示されます。

２．力技

フォントを変更するのがNGなケース（デザインで決まってるなど）の場合に強引に解決する方法として、
スラッシュを反転させて表示させるということができます。

<style>
.reverse-font {
  display: inline-block; /* transformはinline要素には効かない */
  transform: scaleY(-1);
}
</style>

<div>
  <span class="reverse-font">/</span> 今だけお得! /
</div>

というような記述で表示上は問題なく見えます。

タグが汚く感じる場合は以下のような書き方でもOK
CSSの記述量は増えますがタグはスッキリします。

<style>
.catchphrase::before {
  content: "/";
  display: inline-block;
  transform: scaleY(-1);
  margin-right: 1rem;
}

.catchphrase::after {
  content: "/";
  display: inline-block;
  margin-left: 1rem;
}
</style>

<div class="catchphrase">今だけお得!</div>

ちなみに先頭1文字だけに有効な擬似クラスfirst-letterは最初の「記号じゃない文字」（厳密にはもう少し細かい定義がありますが）に適応されて、バックスラッシュは対象外なので以下のような記述はできないです。

<style>
.reverse-first-letter::first-letter {
  transform: scaleY(-1);
}
</style>

<div class="reverse-first-letter">/ 今だけお得! /</div>
<!-- これだと反転してくれない! -->

３．そもそも使わない

身も蓋もないですが、強調するだけなら別の文字もあるので、
わざわざリスキーなバックスラッシュを使わずとも、

＼ 今だけお得! ／
＜ 今だけお得! ＞

のように別の文字を使うほうが早いです。

終わりに

仕事で今回のケースで悩んでいたときにふと力技を思いついたので対応したのですが、
もやっとしたので結局別の文字に置き換えました。

検索しても、円マークを表示するにはという内容が多く、
windowsでバックスラッシュを表示させる方法があまり出てこなかったのでまとめてみました。
他にもっと簡単なやり方がありましたら教えて下さい。