Question

我的网站上需要一些自定义按钮，其外观与其他按钮不同。我为这些按钮创建了一个css类，但它表现得很奇怪。

这是班级：

.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

您可以使用.regCommandButton替换.ui-button.regCommandButton。

这样做你告诉taht .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;    
}

无法更改Primefaces p：commandButton字体属性

1 个答案: