• css3-11 网页如何使用自定义字体


    css3-11 网页如何使用自定义字体

    一、总结

    一句话总结:下载好字体文件,然后在网页中引入,用src: url('my.otf');来引入,使用的时候就使用自己定义的名字来使用这个字体。

    1、网页如何使用自定义字体?

    下载好字体文件,然后在网页中引入,用src: url('my.otf');来引入,使用的时候就使用自己定义的名字来使用这个字体。

    声明

     7         @font-face
     8         {
     9             font-family: my;
    10             src: url('my.otf');
    11         }

    使用

    13         *{
    14             font-family: my;
    15         }

    2、声明网页使用字体文件在哪里声明,声明的关键词是什么?

    在style里面

    @font-face

    3、声明字体为了解决什么问题?

    网页中的字体用户电脑没有,服务器上也没有的问题

    现在只要网站有就可以啦

    4、如何使用声明的字体?

    声明字体的时候会指定名字,用的时候直接使用这个名字就可以了

     7         @font-face
     8         {
     9             font-family: my;
    10             src: url('my.otf');
    11         }
    12 
    13         *{
    14             font-family: my;
    15         }

    二、网页如何使用自定义字体

    1、相关知识

    字体样式:
    @font-face
    {
        font-family: fzm;
        src: url('fzm.ttf');
    }

    2、代码

    自定义字体类型

     1 <!doctype html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>index</title>
     6     <style>
     7         @font-face
     8         {
     9             font-family: my;
    10             src: url('my.otf');
    11         }
    12 
    13         *{
    14             font-family: my;
    15         }
    16         
    17         div{
    18             width:500px;
    19             height:300px;
    20         }    
    21 
    22     </style>
    23 </head>
    24 <body>
    25     <div>
    26         <p>我是小金,我爱睡觉!</p>
    27         <p>linux is very much!</p>
    28         <p>linux is very much!</p>
    29         <p>linux is very much!</p>
    30         <p>linux is very much!</p>
    31     </div>
    32 </body>
    33 </html>
     
  • 相关阅读:
    Yarn
    easyui
    eclipse-android
    js-小技能 そうですか
    sql server 时间处理
    上传文件
    时间 & 时间戳 之间 转换
    JDIC
    Spring 定时器
    映射
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9262853.html
Copyright © 2020-2023  润新知