tft每日頭條

 > 生活

 > html字體實際像素

html字體實際像素

生活 更新时间:2024-11-15 09:57:24

今天講了怎麼使用css中font-family來設置字體,如微軟雅黑、宋體、Arial等。繼續講下使用font-size屬性來定義字體大小。

語法如下:

p {

font-size:20px;

}

px(像素)大小是我們網頁的最常用的單位。谷歌浏覽器默認的字體大小為16px 不同浏覽器可能默認顯示的字體字号大小不一緻,盡量給一個明确值大小,不要默認大小。可以給<body>指定整個頁面文字的大小。

來看下效果:

html字體實際像素(測試開發全棧-HTML)1

對應的代碼為:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS字體屬性之字體系列</title>

<!--對h2修改下字體-->

<style>

body {

font-size: 16px;

}

</style>

</head>

<body>

<h2>明月幾時有</h2>

<p>明月幾時有,把酒問青天</p>

<p>不知天上宮阙,今夕是何年</p>

<p>我欲乘風歸去,又恐瓊樓玉宇</p>

<p>高處不勝寒,起舞弄清影,何似在人間。</p>

</body>

</html>

有沒有發現除了标題标簽,其餘的字的字體都是16px了?那麼這裡需要注意一點: 标題标簽比較特殊,需要單獨指定文字大小。

如下的效果:

html字體實際像素(測試開發全棧-HTML)2

可以看到标題字體變小了,具體的代碼為:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>CSS字體屬性之字體系列</title>

<!--對h2修改下字體-->

<style>

body {

font-size: 16px;

}

h2 {

font-size: 16px;

}

</style>

</head>

<body>

<h2>明月幾時有</h2>

<p>明月幾時有,把酒問青天</p>

<p>不知天上宮阙,今夕是何年</p>

<p>我欲乘風歸去,又恐瓊樓玉宇</p>

<p>高處不勝寒,起舞弄清影,何似在人間。</p>

</body>

</html>

可以看到對h2單獨進行了字體設置

h2 {

font-size: 16px;

}

注意點:

不要忘記加上px

标題有特殊性,需要單獨設置文字大小。

好的,今天就到這裡了。晚安~

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved