CSS之文字样式

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-familyh2>
    <div>普通中文字体div>
    <div>normal English fontdiv>

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

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

    <h2>多字体设置:h2>
    <div id="div3">这里是多字体设置,中文div>
    <div id="div3">This is multiple font configue,Englishdiv>
    <p>多字体设置的目的是增强代码适用性,有那种字体就用那种字体p>
    <p>多字体设置时每个字体之间要添加英文逗号p>
body>
html>
  • 结果展示
    CSS之文字样式_第1张图片

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>
  • 结果展示
    CSS之文字样式_第2张图片

总结:

  • 文字类型和文字样式设置要注意的细节有很多,比如你代码中设置的文字样式,如果在电脑中没有,那么html代码运行也不会显示对应字体。

你可能感兴趣的:(web前端,html5)