CSS之文字样式

最新推荐文章于 2024-04-15 13:03:59 发布

疋瓞

最新推荐文章于 2024-04-15 13:03:59 发布

阅读量478

点赞数

分类专栏： web前端文章标签： html5

本文链接：https://blog.csdn.net/sz1125218970/article/details/128289063

版权

web前端专栏收录该内容

21 篇文章 0 订阅

订阅专栏

1、字体类型设置

标签名：font-family
注意：英文字体只适用于英文，中文字体可以适用中文和英文
代码

<!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>字体类型</title>
    <style>
        #div1{font-family: "Times New Roman";}
        #div2{font-family: 楷体;}
        #div3{font-family: Script,黑体;}/* 注意在有的字体名当中有空格时需要加上引号，例如"Times New Roman" */
    </style>
</head>
<body>
    <h2>字体类型的选择标签用：font-family</h2>
    <div>普通中文字体</div>
    <div>normal English font</div>

    <h2>英文字体适用性对比：</h2>
    <div id="div1">这是Times New Roman类型</div>
    <div id="div1">This is Times New Roman type</div>
    <p>从上面对比展示来看，英文字体只能适用于英文，不能适用于中文</p>

    <h2>中文字体适用性对比：</h2>
    <div id="div2">这是楷体类型</div>
    <div id="div2">This is kaiti type</div>
    <p>从上面对比展示来看，中文字体既适用于中文也适用于英文</p>

    <h2>多字体设置：</h2>
    <div id="div3">这里是多字体设置，中文</div>
    <div id="div3">This is multiple font configue，English</div>
    <p>多字体设置的目的是增强代码适用性，有那种字体就用那种字体</p>
    <p>多字体设置时每个字体之间要添加英文逗号</p>
</body>
</html>

结果展示

2、CSS文字样式设置

文字大小：用像素表示或用单词表示
文字粗细：用单词表示或数值表示【数值100到500是normal，600到900是bold】
文字样式：正常（normal）、斜体（italic）

<!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>字体样式-练习</title>
    <style>
        #d1{ font-size: 32px; font-weight: bold; font-style: normal; color: green; }/* 字体大小、字体粗细、字体样式、字体颜色 */
        #d2{ font-size: 16px; font-weight: bold; font-style: italic; color: black; }/* 字体大小、字体粗细、字体样式、字体颜色 */
        #d3{ font-size: 16px; font-weight: normal; font-style: normal; color: purple; }/* 字体大小、字体粗细、字体样式、字体颜色 */
    </style>
</head>
<body>
    <h1>王强个人简介</h1>
    <div id="d1">基本信息</div>
    <div id="d2">王强，1992年2月28日出生于甘肃庆阳，12岁迎战泰国泰拳冠军</div>
    <p id="d3">  2009年出演电视剧《你的月亮我的心》，2021年筹办个人画展，2022年出征奥运会，是一位人见人爱，花见花开，世间绝
    无仅有的美男子，同时与各个当红女演员有着非同寻常的关系。 
    </p>
</body>
</html>