Font Size with php and/or CSS

Question

I am trying to produce an effect where I have a title on a page all in Capitals. I would however like to see the first character of each word with a slightly larger font size.

For example:

MY TITLE

The M and T would be in size 16 font and the rest of the word would be in size 12. I am pulling the titles from a database (MySQL) so "MY TITLE" is just an example. It could be any wording.

I realise there is a way to do this using substr (in php) and search for where the spaces are at the end of each word. But this seems to me as though it will get a bit messy with coding.

Does anyone have a better suggestion?

Answer 1

I think something like this is what you are looking for.

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

Use the CSS first letter pseudo-element by wrapping each first letter in a <span> tag:

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

Answer 3

Pure PHP solution:

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

CSS Solution:

<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>

ADDITIONAL METHOD: If you want to be able to output a particular format with a variable number of words, you can do something like this:

<?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;