2013-11-27 47 views
0

我想在我的CSS文件的font-family列表中使用字体的斜体变体作为备用字体。这有可能以任何方式?喜欢的东西:是否可以在字体族列表中包含字体样式?

font-family: SuperSlanty, Verdana-Italic; 
+0

-面对? – kinakuta

+0

@kinakuta不,我正在使用[Google字体](https://developers.google.com/fonts/) – Conrad

+0

可能重复的[没有JavaScript的选择性样式后备字体?](http://stackoverflow.com/questions/) 10221975/selective-style-fallback-fonts-without-javascript) –

回答

1

只需使用font-style:italic;描述here

+0

我相信这个想法只有在'SuperSlanty'不存在'的情况下才会有斜体,并且会回落到'Verdana'。 –

+0

这不会使'font-family'斜体中的每个字体都变成?我只想要一种特定的字体(即不是第一种)为斜体。 – Conrad

+1

@Conrad然后你需要JS。抱歉 – Heinrich

0

入住这http://jsfiddle.net/Hd4zq/4/

可以加载你通过JS数组中需要谷歌的字体,然后更改CSS字体属性添加合适的字体样式(在你的情况斜体)到一个特定的CSS类,你将添加到您的html元素。

<script type="text/javascript"> 
     google.load('webfont','1'); 
     google.setOnLoadCallback(function() { 
      WebFont.load({ 
       google: { 
        families: ['Droid Serif','Tangerine'] 
       } 
      }); 
     }); 
    </script> 


<p class="serif">SERIF</p> 
<p class="serifItalic">SERIF ITALIC</p> 
<p class="serifBold">SERIF BOLD</p> 
<p class="serifBoldItalic">SERIF BOLD ITALIC</p> 
<p class="tangerine">Tangerine</p> 


.serif{ 
    font-family:'Droid Serif'; 
    font-size:30px; 
    font-style:normal; 
    font-weight: 400; 
} 

.serifItalic{ 
    font-family:'Droid Serif'; 
    font-size:30px; 
    font-style:italic; 
    font-weight: 400; 
} 

.serifBold{ 
    font-family:'Droid Serif'; 
    font-size:30px; 
    font-style:normal; 
    font-style:bold; 
} 

.serifBoldItalic{ 
    font-family:'Droid Serif'; 
    font-size:30px; 
    font-style:italic; 
    font-weight: bold; 
} 

.tangerine{ 
    font-family:'Tangerine'; 
    font-size:30px; 
    font-style:italic; 
    font-weight: bold; 
} 

是的,你可以通过在font-family属性添加多个字体像添加的字体之一斜体作为后备:您正在使用@font

.fontwithFallback{ 
font-family: 'Droid','Tangerine'; 
} 
相关问题