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

A font-size<\/code>propriedade define o tamanho do texto.<\/p>\n

Ser capaz de gerenciar o tamanho do texto \u00e9 importante no design da web. No entanto, voc\u00ea n\u00e3o deve usar ajustes de tamanho da fonte para fazer com que os par\u00e1grafos se pare\u00e7am com t\u00edtulos, ou se os t\u00edtulos se pare\u00e7am com par\u00e1grafos.<\/p>\n

Sempre use as tags HTML apropriadas, como <h1><\/code> – <h6><\/code> para t\u00edtulos e <p><\/code> para par\u00e1grafos.<\/p>\n

O valor do tamanho da fonte pode ser um tamanho absoluto ou relativo.<\/p>\n

Tamanho absoluto:<\/strong><\/p>\n

Define o texto para um tamanho especificado<\/p>\n

N\u00e3o permite que um usu\u00e1rio altere o tamanho do texto em todos os navegadores (inv\u00e1lido por raz\u00f5es de acessibilidade)<\/p>\n

O tamanho absoluto \u00e9 \u00fatil quando o tamanho f\u00edsico da sa\u00edda \u00e9 conhecido<\/p>\n

Tamanho relativo:<\/strong><\/p>\n

Define o tamanho em rela\u00e7\u00e3o aos elementos circundantes
\nPermite que um usu\u00e1rio altere o tamanho do texto nos navegadores<\/p>\n

Nota: Se voc\u00ea n\u00e3o especificar um tamanho de fonte, o tamanho padr\u00e3o para o texto normal, como par\u00e1grafos, \u00e9 16 px (16 px = 1em).<\/span><\/p>\n

Definir tamanho da fonte com pixels<\/strong><\/p>\n

A configura\u00e7\u00e3o do tamanho do texto com pixels oferece controle total sobre o tamanho do texto:<\/p>\n

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

h1 {<\/code>
\nfont-size: 40px;<\/code>
\n}<\/code><\/p>\n

h2 {<\/code>
\nfont-size: 30px;<\/code>
\n}<\/code><\/p>\n

p {<\/code>
\nfont-size: 14px;<\/code>
\n}<\/code><\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n  font-size: 40px;\r\n}\r\n\r\nh2 {\r\n  font-size: 30px;\r\n}\r\n\r\np {\r\n  font-size: 14px;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n<p>This is another paragraph.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Dica: Se voc\u00ea usar pixels, ainda poder\u00e1 usar a ferramenta de zoom para redimensionar a p\u00e1gina inteira.<\/span><\/p>\n
 <\/p>\n
Definir tamanho da fonte com Em<\/strong><\/p>\n
Para permitir que os usu\u00e1rios redimensionem o texto (no menu do navegador), muitos desenvolvedores usam em vez de pixels.<\/p>\n
1em \u00e9 igual ao tamanho da fonte atual. O tamanho do texto padr\u00e3o nos navegadores \u00e9 16 px. Portanto, o tamanho padr\u00e3o de 1em \u00e9 16px.<\/p>\n
O tamanho pode ser calculado de pixels para em usando esta f\u00f3rmula: pixels \/ 16 = em<\/p>\n
Exemplo<\/strong><\/p>\n
h1 {<\/code>
\nfont-size: 2.5em; \/* 40px\/16=2.5em *\/<\/code>
\n}<\/code><\/p>\n
h2 {<\/code>
\nfont-size: 1.875em; \/* 30px\/16=1.875em *\/<\/code>
\n}<\/code><\/p>\n
p {<\/code>
\nfont-size: 0.875em; \/* 14px\/16=0.875em *\/<\/code>
\n}<\/code><\/p>\n
 <\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nh1 {\r\n  font-size: 2.5em; \/* 40px\/16=2.5em *\/\r\n}\r\n\r\nh2 {\r\n  font-size: 1.875em; \/* 30px\/16=1.875em *\/\r\n }\r\n\r\np {\r\n  font-size: 0.875em; \/* 14px\/16=0.875em *\/\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n<p>Specifying the font-size in em allows all major browsers to resize the text.\r\nUnfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger\/smaller than it should.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
No exemplo acima, o tamanho do texto em \u00e9 igual ao exemplo anterior em pixels. No entanto, com o tamanho em, \u00e9 poss\u00edvel ajustar o tamanho do texto em todos os navegadores.<\/p>\n
Infelizmente, ainda h\u00e1 um problema com vers\u00f5es mais antigas do Internet Explorer. O texto se torna maior do que deveria quando aumentado e menor do que deveria quando diminu\u00eddo.<\/p>\n
Use uma combina\u00e7\u00e3o de porcentagem e Em<\/p>\n
A solu\u00e7\u00e3o que funciona em todos os navegadores \u00e9 definir um tamanho de fonte padr\u00e3o em porcentagem para o elemento <body><\/code>:<\/p>\n
Exemplo<\/strong><\/p>\n
body {<\/code>
\nfont-size: 100%;<\/code>
\n}<\/code><\/p>\n
h1 {<\/code>
\nfont-size: 2.5em;<\/code>
\n}<\/code><\/p>\n
h2 {<\/code>
\nfont-size: 1.875em;<\/code>
\n}<\/code><\/p>\n
p {<\/code>
\nfont-size: 0.875em;<\/code>
\n}<\/code><\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  font-size: 100%;\r\n}\r\n\r\nh1 {\r\n  font-size: 2.5em;\r\n}\r\n\r\nh2 {\r\n  font-size: 1.875em;\r\n}\r\n\r\np {\r\n  font-size: 0.875em;\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>This is heading 1<\/h1>\r\n<h2>This is heading 2<\/h2>\r\n<p>This is a paragraph.<\/p>\r\n<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Nosso c\u00f3digo agora funciona muito bem! Ele mostra o mesmo tamanho de texto em todos os navegadores e permite que todos os navegadores aumentem ou redimensionem o texto!<\/p>\n
Tamanho da fonte responsivo<\/strong><\/p>\n
O tamanho do texto pode ser definido com uma vw unidade, o que significa “largura da janela de exibi\u00e7\u00e3o”.<\/p>\n
Dessa forma, o tamanho do texto seguir\u00e1 o tamanho da janela do navegador:<\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\r\n<body>\r\n\r\n<h1 style=\"font-size:10vw;\">Responsive Text<\/h1>\r\n\r\n<p style=\"font-size:5vw;\">Resize the browser window to see how the text size scales.<\/p>\r\n\r\n<p style=\"font-size:5vw;\">Use the \"vw\" unit when sizing the text. 10vw will set the size to 10% of the viewport width.<\/p>\r\n\r\n<p>Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


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