带有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;