Inclusion of small capital

Question

In MS Word, we have a text function called "Small Capitals". It turns all letters into uppercase, but lowercase letters become smaller than uppercase. I need to know if this is possible in CSS.

Example:

Original : Hello World
Small capitals : H ELLO W ORLD

Notes : SO Markdown does not support CSS font-size style in nether small tags, so I show how to hack. Well, the letters strong are larger than the regular letter in small capitals.

Is this possible in CSS? How can i do this?

Answer 1

It is called "little capitals" or "little caps" in English. In typography, small capitals are separately developed (in the author's font) by versions of letters. They have uppercase shapes, but their height is usually only garbage exceeding the height x (lowercase letter "x" height) of the font. They can be implemented in the form of a small font, but most often these are glyph options inside the font.

In MS Word up to Word 2007, as well as in CSS implementations for font-variant: small-caps , "small capitals" are really just reduced capital letters. (Word 2010 provides access to OpenType features and real small caps.) Usually, this means that their stroke width is too small, and to avoid a too bad effect, reducing the font size is quite modest, so fake "small caps" are not much smaller than regular capital .

For these reasons, "little caps" are in most cases best avoided on web pages.

However, work continues to provide access to OpenType features in CSS. Support currently exists in the form of browsers with prefix versions of the font-feature-settings property, as suggested by CSS3 Fonts. Example:

 <style> body { font-family: Calibri, sans-serif; } .sc { -moz-font-feature-settings: 'smcp'; -webkit-font-feature-settings: 'smcp'; -ms-font-feature-settings: 'smcp'; font-feature-settings: 'smcp'; } </style> <div class=sc>Hello world</div> <div><span style="font-variant: small-caps">Hello world</span> (fake small caps)</div> 

This works with browser support (Chrome, Firefox, IE 10), provided that the font has small capitals (e.g. Calibri, Cambria, Candara, Constantia, Corbel, Palatino Linotype).

Answer 2

yes, you can do it with font-variant . I think you mean uppercase

 <span style="font-variant:small-caps;">Hello World</span> 

Answer 3

I think you are talking about little caps, so try:

font-variant: small-caps;