如何讓文本中每個單詞的第一個字母與其他大小不同？如何獲取每個單詞的第一個字母是不同的大小，其餘大小相同

例如，我試圖讓J慢跑比ogging更大，J慢跑比og更大。還有一切都必須是大寫字母。

慢跑JOG

到目前爲止，我已經

HTML：

<h1> 
    JOGGING JOG 
</h1>

h1{ 
    font-family: amatic sc,cursive; 
    color: #FFFFFF; 
    font-size: 120px; 
}

我查閱了一些資料，但看來這隻能在JavaScript來完成。我可能是錯的，但如果可能的話，這可以用HTML和CSS來完成嗎？也許使用不同的類來保存信息，然後定位字母？

來源

2016-01-22 MadMan

也許這樣的事情https://jsfiddle.net/aow3qm9s/1/ –

一個簡單的跨瀏覽器的解決方案，是這樣的：

h1{ 
 
    font-family: amatic sc,cursive; 
 
    color: #000; 
 
    font-size: 30px; 
 
} 
 
h1 span { font-size: 40px; }

<h1><span>J</span>OGGING <span>J</span>OG</h1>

來源

2016-01-22 03:26:31

完美的感謝很多× – MadMan

當然，但只需要等待3分鐘:) – MadMan

使用值爲small-caps的font-variant CSS屬性。（「Small caps」是您正在尋找的印刷效果的正確名稱。）

CSS設計人員已經預見到您的要求，並且深思熟慮地提供了一個解決方案，因此我們所要做的就是指定單個CSS屬性font-variant。

font-variant會將小寫字母顯示爲較小尺寸的大寫字母，並將大寫字母顯示爲正常大小。因此，指定所需的字母更大（「J」）爲大寫，但你要爲小寫字母小字母（「ogging」，「OG」）：

<h1>Jogging Jog</h1>

按照spec，font-variant

可以顯示小寫字母。小型字形字形通常使用大寫字母的形式，但縮小爲小寫字母的大小。

實施例：

h1 { 
 
    font-family: amatic sc, cursive; 
 
    color: #000; 
 
    font-size: 30px; 
 

 
    /* MAGIC HERE */ 
 
    font-variant: small-caps; 
 
}

<h1>Jogging Jog</h1>

來源

2016-01-22 03:21:56

無遺憾它沒有工作:( – MadMan

對不起，我很困惑，你的意思是在h1的html文件中，我需要把慢跑作業，並鏈接到CSS？如果是這樣，我做了這個，但它沒有工作 – MadMan

你對什麼感到困惑？例如，您只需將「h1」的內容寫爲「慢跑慢跑」（而不是「JOGGING JOG 「），並將'font-variant'屬性規則添加到'h1'的CSS中。 – 2016-01-22 03:32:20

嘗試此。

CSS

h1:first-child:first-letter { float: left; color: #903; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

僅供參考請this

希望這有助於。

來源

2016-01-22 03:25:13 Help

但這隻能解決元素的第一個字母，而不是每個單詞的首字母，因爲OP似乎需要。 – 2016-01-22 03:27:28

啊感謝這個工程的第j個慢跑，但不是最後法官在慢跑:( – MadMan

你可以修改你的HTML像

慢跑

工作

– Help

如何獲取每個單詞的第一個字母是不同的大小，其餘大小相同

回答

慢跑

工作

相關問題