无法更改 Primefaces p:commandButton 字体属性答案

【问题标题】：Cannot change Primefaces p:commandButton font properties无法更改 Primefaces p:commandButton 字体属性
【发布时间】：2014-10-10 13:08:26
【问题描述】：

我需要在我的网站上添加一些看起来与其他按钮不同的自定义按钮。我为这些按钮创建了一个 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 内，则未设置与字体相关的属性（字体系列、字体大小）。所有其他都适用于按钮。

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

编辑： 对字体属性使用 !important 无济于事。

【问题讨论】：

你读过这个link吗？
@mrganser：是的，我做到了，我相应地加载了我的样式表。在任何其他情况下，我都可以覆盖 PF 样式类。但如果是按钮的字体，它就不起作用了。
font-color 应该是color
不错的发现。它实际上解决了颜色问题。不幸的是我仍然无法修改字体的大小和字体类型。
将 .regCommandButton 类替换为 .ui-button .regCommandButton。如果它不起作用，请尝试检查按钮（我正在使用 chrome 来执行此操作），您将看到 span cssclass of p:commandButton 文本，也试试。

标签： html css jsf primefaces

【解决方案1】：

您可以用.ui-button.regCommandButton 替换.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;    
}

【讨论】：