{"id":598,"date":"2020-07-03T16:49:59","date_gmt":"2020-07-03T19:49:59","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=598"},"modified":"2020-07-03T16:49:59","modified_gmt":"2020-07-03T19:49:59","slug":"fontes-css-estilo-da-fonte-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/fontes-css-estilo-da-fonte-css\/","title":{"rendered":"Fontes CSS – Estilo da fonte CSS"},"content":{"rendered":"

A font-style<\/code> propriedade \u00e9 usada principalmente para especificar texto em it\u00e1lico.<\/p>\n

Esta propriedade possui tr\u00eas valores:<\/p>\n

normal<\/code> – o texto \u00e9 mostrado normalmente
\nit\u00e1lico<\/code> – o texto \u00e9 mostrado em it\u00e1lico
\nobl\u00edquo<\/code> – o texto est\u00e1 “inclinado” (obl\u00edquo \u00e9 muito semelhante ao it\u00e1lico, mas menos suportado)<\/p>\n

Exemplo<\/strong><\/p>\n

p.normal {<\/code>
\nfont-style: normal;<\/code>
\n}<\/code><\/p>\n

p.italic {<\/code>
\nfont-style: italic;<\/code>
\n}<\/code><\/p>\n

p.oblique {<\/code>
\nfont-style: oblique;<\/code>
\n}<\/code><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.normal {\r\n  font-style: normal;\r\n}\r\n\r\np.italic {\r\n  font-style: italic;\r\n}\r\n\r\np.oblique {\r\n  font-style: oblique;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p class=\"normal\">This is a paragraph in normal style.<\/p>\r\n<p class=\"italic\">This is a paragraph in italic style.<\/p>\r\n<p class=\"oblique\">This is a paragraph in oblique style.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Espessura da fonte<\/strong><\/p>\n
A font-weight<\/code> propriedade especifica o peso de uma fonte:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.normal {\r\n  font-weight: normal;\r\n}\r\n\r\np.light {\r\n  font-weight: lighter;\r\n}\r\n\r\np.thick {\r\n  font-weight: bold;\r\n}\r\n\r\np.thicker {\r\n  font-weight: 900;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p class=\"normal\">This is a paragraph.<\/p>\r\n<p class=\"light\">This is a paragraph.<\/p>\r\n<p class=\"thick\">This is a paragraph.<\/p>\r\n<p class=\"thicker\">This is a paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Variante de fonte<\/strong><\/p>\n
A font-variant<\/code>propriedade especifica se um texto deve ou n\u00e3o ser exibido em uma fonte com letras mai\u00fasculas.<\/p>\n
Em uma fonte com letras mai\u00fasculas, todas as letras min\u00fasculas s\u00e3o convertidas em letras mai\u00fasculas. No entanto, as letras mai\u00fasculas convertidas aparecem em um tamanho de fonte menor que as letras mai\u00fasculas originais no texto.<\/p>\n
Exemplo<\/strong><\/p>\n
p.normal {<\/code>
\nfont-variant: normal;<\/code>
\n}<\/code><\/p>\n
p.small {<\/code>
\nfont-variant: small-caps;<\/code>
\n}<\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.normal {\r\n  font-variant: normal;\r\n}\r\n\r\np.small {\r\n  font-variant: small-caps;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<p class=\"normal\">My name is Hege Refsnes.<\/p>\r\n<p class=\"small\">My name is Hege Refsnes.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n