wariant czcionki: small-caps; vs text-transform: capitalize;

Question

w CSS jaka jest różnica między font-variant:small-caps; i text-transform:capitalize;

Answer 1

jeśli używasz text-transform: capitalize Słowo „przepełnienia stosu” staną się „przepełnienie stosu”, tylko 1st litera każdego słowa dostaje CAPS.

, ale jeśli używasz font-variant: small-caps, słowo "przepełnienie stosu" staje się "PRZESZKANIE STACK", ale wysokość znaku typu będzie odpowiadać wysokości małych liter przed zastosowaniem stylu CSS. więc wszystkie CAPS, ale mniejsze. (Sᴛᴀᴄᴋ Oᴠᴇʀғʟᴏᴡ)

i text-transform: uppercase sprawia, że ​​wszystkie Czapki też, ale jednak krój pozostaje ten sam rozmiar, więc uppercase krój będzie większy, że small-caps

Answer 2

Wielkie jest tekst składający się z normalnych wielkimi literami:

UPPERCASE

small-caps jest jak tak (zaczerpnięte z here):

Wikipedia article on Small caps

text-transform jest błędny w niektórych przeglądarkach: Zobacz here.

Na przykład:

W programie Internet Explorer do wersji Windows włącznie 7, wartości małe i wielkie zachowują się jak nikt, jeśli właściwość font-variant jest ustawiony na small-caps.

Answer 3

W regularnych Typografia istnieje ogromna różnica w small-caps i wielkimi literami , jak stwierdził jeden z autorów na tym forum. Małe kapitały są wielkimi literami o wysokości x (prawie) równej małym literom.

Aby naśladować to za pomocą CSS, można użyć font-variant: small-caps;.

Jeśli używasz tego z niestandardową czcionką (zainicjowaną przy użyciu @font-face), czasami coś nie działa.

Spróbuj dodać text-transform: lowercase; przed dodaniem font-variant:

.smallcaps { 
    text-transform: lowercase; 
    font-variant: small-caps; 
}