帶有PHP和/或CSS的字體大小

Question

我正在嘗試產生一種效果，使我在大寫字母的頁面上都有標題。 但是，我希望看到每個單詞的第一個字符的字體都更大。

例如：

我的標題

M和T的字體大小為16，其余單詞的大小為12。我從數據庫（MySQL）中提取標題，因此“ MY TITLE”只是一個示例。 可以是任何措辭。

我意識到有一種方法可以使用substr（在php中）並在每個單詞的末尾搜索空格。 但是在我看來，這似乎會使編碼有些混亂。

有誰有更好的建議？

Answer 1

我認為您正在尋找類似這樣的東西。

的PHP

<?php
$text = "My Title";
$newText = preg_replace('/(\w)(\w+\b)/', '<span class="firstLetter">$1</span>$2', $text);

echo $newText;  // <span class="firstLetter">M</span>y <span class="firstLetter">T</span>itle

的CSS

.firstLetter{font-size: 125%;}

Answer 2

通過將每個首字母包裝在<span>標記中，使用CSS首字母偽元素 ：

p span:first-letter
{ 
    font-size: 16pt;
}

Answer 3

純PHP解決方案：

<?php
$str = '<h2><big>S</big>ome <big>t</big>ext</h2>';
echo strtoupper($str);
?>

CSS解決方案：

<h2><span class="larger">S</span>ome <span class="larger">T</span>ext</h2>
<style type="text/css">
h2{text-transform:uppercase;}
.larger{font-size:larger;}
</style>

其他方法：如果您希望能夠以可變數量的單詞輸出特定格式，則可以執行以下操作：

<?php
$string = 'VariaBle Number oF WORds!';
$words = explode(' ', $string);
$modified = array();
foreach($words as $word)
{
    $modified[] = '<big>'.substr($word, 0, 1).'</big>'.substr($word, 1, strlen($word));
}
echo strtoupper(implode(' ', $modified));
?>

Answer 4

簡單的CSS屬性，

font-variant:small-caps;