html - 无法更改 Primefaces p :commandButton font properties

Question

我的网站上需要一些看起来与其他按钮不同的自定义按钮。 我已经为这些按钮创建了一个 css 类，但它的行为很奇怪。

这是类(class):

.regCommandButton { 
    color: #ffffff;
    background: #29b6a0;
    border-color: #23a38f;

    width: 100%; 
    height: 25px; 

    font-family: 'pluto_sansthin';
    font-size:1.4em;    
}

在同一个 css 文件中导入字体:

@font-face {
font-family: 'pluto_sansthin';
src: url(#{resource['fonts/plutosansthin-webfont.eot']});
src: url(#{resource['fonts/plutosansthin-webfont.eot?#iefix']}) format('embedded-opentype'),
     url(#{resource['fonts/plutosansthin-webfont.woff']}) format('woff'),
     url(#{resource['fonts/plutosansthin-webfont.ttf']}) format('truetype');
font-weight: normal;
font-style: normal;

}

html 实现:

<p:outputPanel>
  <p:commandButton styleClass="regCommandButton" value="Save" action="#{URBean.saveNewUser}" update="regPanel" />
</p:outputPanel>

我的问题是，如果按钮位于 p:outputpanel 内部，则不会设置与字体相关的属性(font-family、font-size)。所有其他内容都适用于该按钮。

如果我将按钮放在输出面板之外，一切都会按预期进行。

编辑: 使用 !important 作为字体属性并没有帮助。

Answer 1

您可以用 .ui-button.regCommandButton 替换 .regCommandButton 来解决此问题。

这样做时，您用 .ui-button 和 .regCommandButton 告诉每个元素将具有所描述的属性:

.ui-button.regCommandButton { 
    color: #ffffff;
    background: #29b6a0;
    border-color: #23a38f;

    width: 100%; 
    height: 25px; 

    font-family: 'pluto_sansthin';
    font-size:1.4em;    
}