如何将小写大写字母应用于字体系列？

Question

Is it possible to apply small caps to a font family instead of a tag? I am using the orator font (which is a small caps monospaced font) but I realise its not really web safe. Andale looks similar and is web safe but isn't a small caps font. So in the absence of orator I would like Andale to be called on with small caps without adding the small caps attribute to the orator. For the H1 tag. How can I do this?

Answer 1

Apply font-variant: small-caps to your H1 tag.

Demo

Answer 2

Consider using a different (more thinner) font and then use the :first-letter CSS3 selector to make the first letter larger instead. There are a number of Open-Type fonts similar to the one you posted.

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

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

Or Another way :