为特定类声明的连字，但出现在所有位置

Question

我想在我的网站上显示连字，但只为一个特定的类，如.ligature。这一切在Firefox、Chrome和Safari上都运行得很好(还没有测试IE)。

但问题是，在Firefox和Safari中，连字在网站上到处都是显示的，即使标记中没有添加任何类。不知怎么的，这在Chrome中不会发生。

我正在使用下面的CSS

.ligature{
text-rendering:optimizeLegibility;
-moz-font-feature-settings:"liga=1, dlig=1"; 
-ms-font-feature-settings:"liga", "dlig"; 
-o-font-feature-settings:"liga", "dlig"; 
-webkit-font-feature-settings:"liga", "dlig"; 
font-feature-settings:"liga", "dlig";
}

和一些HTML，例如

<h2 class="ligature">A large flask</h2> /*Should shown a ligature*/

<p>Some random paragraph text and a flask</p> */ Also shows a ligature in Safari and   
Firefox but not in Chrome (as it should be) */

这是什么浏览器的bug吗？或者我在什么地方犯了一个错误？

Answer 1

试着说得更具体一些，比如

h2 .ligature {
   text-rendering: optimizeLegibility;
   -moz-font-feature-settings:"liga=1, dlig=1"; 
   -ms-font-feature-settings:"liga", "dlig"; 
   -o-font-feature-settings:"liga", "dlig"; 
   -webkit-font-feature-settings:"liga", "dlig"; 
   font-feature-settings:"liga", "dlig";
}

这样一来，它应该只应用于h2标签，然后才是你的连字类。