{"id":594,"date":"2020-07-03T16:46:04","date_gmt":"2020-07-03T19:46:04","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=594"},"modified":"2022-12-09T08:34:55","modified_gmt":"2022-12-09T11:34:55","slug":"fontes-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/fontes-css\/","title":{"rendered":"Fontes CSS"},"content":{"rendered":"

As propriedades da fonte CSS definem a fam\u00edlia da fonte, a ousadia, o tamanho e o estilo de um texto.<\/p>\n

\"\"<\/p>\n

Fam\u00edlias de fontes CSS<\/strong><\/p>\n

No CSS, existem dois tipos de nomes de fam\u00edlia de fontes:<\/p>\n

fam\u00edlia gen\u00e9rica – um grupo de fam\u00edlias de fontes com apar\u00eancia semelhante (como “Serif” ou “Monospace”)
\nfam\u00edlia de fontes – uma fam\u00edlia de fontes espec\u00edfica (como “Times New Roman” ou “Arial”)<\/p>\n

Nota:<\/strong>\u00a0Nas telas de computador, as fontes sem serifa s\u00e3o consideradas mais f\u00e1ceis de ler do que as fontes com serifa.<\/span><\/p>\n

Fam\u00edlia de fontes<\/strong><\/p>\n

A fam\u00edlia da fonte de um texto \u00e9 definida com a font-family<\/code>propriedade<\/p>\n

A font-family<\/code>propriedade deve conter v\u00e1rios nomes de fontes como um sistema de “fallback”. Se o navegador n\u00e3o suportar a primeira fonte, ele tenta a pr\u00f3xima fonte e assim por diante.<\/p>\n

Comece com a fonte desejada e termine com uma fam\u00edlia gen\u00e9rica, para permitir que o navegador escolha uma fonte semelhante na fam\u00edlia gen\u00e9rica, se nenhuma outra fonte estiver dispon\u00edvel.<\/p>\n

Nota : Se o nome de uma fam\u00edlia de fontes tiver mais de uma palavra, ele dever\u00e1 estar entre aspas, como: “Times New Roman”.<\/p>\n

 <\/p>\n

Mais de uma fam\u00edlia de fontes \u00e9 especificada em uma lista separada por v\u00edrgula:<\/p>\n

 <\/p>\n

.serif {<\/code>
\nfont-family: \"Times New Roman\", Times, serif;<\/code>
\n}<\/code><\/p>\n

.sansserif {<\/code>
\nfont-family: Arial, Helvetica, sans-serif;<\/code>
\n}<\/code><\/p>\n

.monospace {<\/code>
\nfont-family: \"Lucida Console\", Courier, monospace;<\/code>
\n}<\/code><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\n.serif {\r\n  font-family: \"Times New Roman\", Times, serif;\r\n}\r\n\r\n.sansserif {\r\n  font-family: Arial, Helvetica, sans-serif;\r\n}\r\n\r\n.monospace {\r\n  font-family: \"Lucida Console\", Courier, monospace;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>CSS font-family<\/h1>\r\n<p class=\"serif\">This is a paragraph, shown in the Times New Roman font.<\/p>\r\n<p class=\"sansserif\">This is a paragraph, shown in the Arial font.<\/p>\r\n<p class=\"monospace\">This is a paragraph, shown in the Lucida Console font.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
\"\"<\/p>\n
Exemplo<\/strong><\/p>\n
Especifique a fonte “Impact” para um par\u00e1grafo:<\/p>\n
p.impact {<\/code>
\nfont-family: Impact, Charcoal, sans-serif;<\/code>
\n}<\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\np.impact {\r\n  font-family: Impact, Charcoal, sans-serif;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>CSS font-family<\/h1>\r\n<p class=\"impact\">This is a paragraph, shown with the Impact font.<\/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