html - 日本特殊字符的不同网页字体

Question

我在日本网站上工作，我使用的是 Meiryo 网络字体。我真的很喜欢这种字体，但是特殊字符的边距太大了。确切的问题是像【这样的特殊字符前面有太多的空间，如果这样的字符是一行的第一个，这会使设计看起来不合时宜。

font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;

<h3>【好き】</h3>
<p>猫、アクリル板、真空管、リンゴジュース、ゾロ目、柄物、ドラッグストア、レゴ、アイドル、アニメ、光る物、製菓、イラスト、ドラム(叩けない)、ダリ</p>
<h3>【好きくない】</h3>
<p>煙草、カフェイン、満員電車及び人混み、パンチのあるアルコール類、刺激物全般(辛い、苦い)、算数、スポーツ全般、読書、プンプンしてる人</p>
<h3>【弱点】</h3>
<p>近眼乱視、虚弱、猫舌、譜面が読めない、書けない。方向音痴、機械音痴、運動音痴。睡眠をとらないと死ぬ。強く怒られると死ぬ。</p>

我的浏览器中的问题图片: http://i.stack.imgur.com/OYqMt.jpg

我解决这个问题的想法是编写一个脚本，将每个特殊字符放入一个具有负边距的容器中。这显然非常 hacky，根本不实用，那么有没有更好的解决方案，比如只为特殊字符使用不同的字体？

Answer 1

我不会说这是一个很好的选择，但您可以让 CSS 渲染柱状括号。通过这样做，您将完全从文本中删除括号，因此它们不再是可选的、可索引的等等，但它会用一个简单的 CSS 类解决这些字符的填充问题，并且它应该适用于任何元素。

这只适用于这两个字符。其他特殊字符需要类似的 CSS 规则。

.brackets:before {
    content:'\3010';
    margin-left:-1.5%;
}
.brackets:after {
    content:'\3011';
    margin-right:-1.5%;
}

然后在您的 HTML 中，只需添加一个括号类并删除文本中的括号:

<h3 class="brackets">好き</h3>

.brackets:before {
    content:'\3010';
    margin-left:-1.5%;
}
.brackets:after {
    content:'\3011';
    margin-right:-1.5%;
}

<h3 class="brackets">好き</h3>
<p>猫、アクリル板、真空管、リンゴジュース、ゾロ目、柄物、ドラッグストア、レゴ、アイドル、アニメ、光る物、製菓、イラスト、ドラム(叩けない)、ダリ</p>
<h3 class="brackets">好きくない</h3>
<p>煙草、カフェイン、満員電車及び人混み、パンチのあるアルコール類、刺激物全般(辛い、苦い)、算数、スポーツ全般、読書、<span class="brackets">プンプンしてる人</span></p>
<h3 class="brackets">弱点</h3>
<p>近眼乱視、虚弱、猫舌、譜面が読めない、書けない。方向音痴、機械音痴、運動音痴。睡眠をとらないと死ぬ。強く怒られると死ぬ。</p>