html - 如何在css中的同一行中有两种字体？

Question

我正在使用 salesforce 并使用状态服务我可以显示我的表格中将显示哪种颜色，但问题是它只显示纯色我无法在上面放置任何文本。所以我在 css 中使用了“after”功能，这样我就能够显示文本和字体很棒的图标。
现在我已经知道我在显示图标和旁边的 Arial 字体文本时遇到了一点问题。这是我所做的所有事情。任何人都知道如何让它工作？

.services-table { width: 100%; margin: -9px 0 10px; border-collapse: collapse; }
  .services-table th { color:#fff; background: #A5A5A5; padding: 10px; }
  .services-table td { padding: 8px 10px; }
  .services-table tr.odd { background: #F3F3F3; }
  .services-table tr.even { background: #E6E6E6; }
  .services-table th.col-service, td.col-service { width: 30%; } 
  .services-table th.col-info, td.col-info { width: 50%; }  
  .services-table th.col-status, td.col-status { width: 20%; }  

  span.status { display:inline-block; width: 15px; height:15px; border-radius:10px;  }
  span.status:after {  }

  span.status.green { color: #008000; }
  span.status.green:after {  font-weight: bold; color #008000; content: '\f118 Good'}
  span.status.amber { color: #ffcf00;  }
  span.status.amber:after { font-family: FontAwesome; font-weight: bold; color: #ffcf00; content: '\f11a' }
    span.status.amber:after { font-family: Arial,sans-serif; color: #ffcf00; content: ' Fixing' }
  span.status.red {  color: #ff0000;  }
  span.status.red:after { font-family: FontAwesome; font-weight: bold; color: #ff0000; content: '\f119 Issues'  }

Here is what the table looks like with the inspector

 <apex:outputPanel id="logged" layout="block" rendered="{!NOT(ISPICKVAL($User.UserType,'Guest'))}" >      
                    <div class="row">

                        <!-- main pane -->
                        <div class="col-md-12 col-xs-12 ">
                            <h1 class="smalltitle">
                                    <span>Service status</span>
                                </h1>
                            <div class="well well-large well-transparent clearfix">
                                <center>
                                <!-- SERVICE STATUS SECTION -->
                                <!--h3><i class="fa fa-tachometer"></i> Service status</h3>-->
                                <!-- <mark>service status table goes here</mark> -->
                                <apex:dataTable value="{!serviceitems}" var="item" id="tblServices" 
                                                styleClass="table table-condensed services-table table-striped" rowClasses="odd,even" columnClasses="col-service, col-info, col-status">
                                    <apex:column >
                                        <apex:facet name="header">Service</apex:facet>
                                        <apex:outputText value="{!item.name}"/>
                                    </apex:column>
                                    <apex:column >
                                        <apex:facet name="header">Information</apex:facet>
                                        <apex:outputText value="{!item.Information__c}"/>
                                        {! IF(item.information__c='','No reported issues','')}
                                    </apex:column>
                                    <apex:column >
                                        <apex:facet name="header">Status</apex:facet>
                                        <span class="status {!item.Status_Colour__c}"> </span>      
                                    </apex:column>           
                                </apex:dataTable> 
                                     </center>
                            </div>

                        </div>
                    </div>

Answer 1

<span style="font-family:arial">This is in Arial font.</span>  <span style="font-family:Georgia">And this is in San Serif, Cool?</span>