CSS：small-caps，第一個字母有點大膽

有沒有辦法讓第一個字母更細一點或vice verca？請參閱提供的圖像和CSS。CSS：small-caps，第一個字母有點大膽

CSS：

table.form td { 
    padding: 10px; 
    font-family: "Open Sans"; 
    font-variant: small-caps; 
    font-size: 15px; 
}

enter image description here

正如你可以看到這是大寫更黑一個比特的每個字的第一個字母/大膽

來源

2014-01-11 RnD

目前尚不清楚看出你是否要進行的第一個字母更薄或較粗。問題似乎是你正在使用'font-variant：small-caps'，它產生了「假小帽」，它實際上只是縮小尺寸的大寫字母，因此筆畫寬度比正常大寫字母小。而接受的答案涉及其他事情，所以它仍然不知道問題是什麼。 –

對於每個單詞的第一個字母不是。

但是你可以使用:first-letter僞選擇

僅用於擴大每個單詞的第一個字母的td元素的第一個字母，你可以使用text-transform:capitilize

演示與兩個技巧：http://jsfiddle.net/gaby/8KjT5/1

另外，如果使用jQuery你可以使用Lettering.js plugin

與

$(function(){ 
    $('table.form td').lettering('words'); 
});

與CSS聯合調用它

table.form td span[class^="word"]{ 
    display:inline-block; 
} 
table.form span[class^="word"]:first-letter { 
    font-weight:bold; 
    font-size:17px; 
}

你得到想要的結果作爲http://jsfiddle.net/gaby/8KjT5/3/

來源

2014-01-11 15:16:09

真棒，像魅力 – RnD

這是如何解決主要問題，使第一個字母更薄？ –

@ JukkaK.Korpela「* or vice verca *」和附加的截圖..我的理解是，基本問題是如何針對特殊造型的每個單詞的第一個字母。 –

考慮使用不同的（更細）字體，然後使用:first-letter CSS3選擇器使第一個字母變大。有許多Open-Type字體與您發佈的字體相似。

table.form td { 
    padding: 10px; 
    font-family: "Open Sans"; 
    font-variant: small-caps; 
    font-size: 15px; 
} 

    table.form td:first-letter { 
      font-size: 18px; 
    }

來源

2014-01-11 15:14:58

這適用於元素的第一個字母，而不是每個單詞的第一個字母 – RnD

我認爲你不能在CSS中做到這一點。您必須將每個單詞的第一個字母包裹在一個額外的元素中，然後設計它的樣式

來源

2014-01-11 15:15:14 Felix

CSS：small-caps，第一個字母有點大膽

回答

相關問題