zoukankan      html  css  js  c++  java
  • 【CSS3】---嵌入字体@font-face

    @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体。

    语法:

    @font-face {
        font-family : 字体名称;
        src : 字体文件在服务器上的相对或绝对路径;
    }

    这样设置之后,就可以像使用普通字体一样在(font-*)中设置字体样式。

    比如:

    p {
        font-size :12px;
        font-family : "My Font";
        /*必须项,设置@font-face中font-family同样的值*/
    }

    例子:

    <!DOCTYPE html>
    <html>
    <head> 
    <meta charset="utf-8">
    <title>嵌入字体</title>
    <style type="text/css">
    @font-face{
        font-family: "myFont";
        src: url("http://www.imooc.com/Amaranth-BoldItalic.otf");
    }
    .demo {
        width: 340px;
        padding: 30px;    
        color: #566F89;
        background: #000;
        font-size:58px;
        font-family: "myFont";
    }
    </style>  
    </head> 
    <body>
    <div class="demo">myFont</div>
    </body>
    </html>

    效果:加了字体的:

  • 相关阅读:
    git 常用命令
    最近任务 && react文章列表
    markdown 常用格式API
    webpack 插件怎么写
    iframe
    重置浏览器滚动条css
    webpack4
    vscode插件开发
    vscode插件
    react router 的push replace
  • 原文地址:https://www.cnblogs.com/itguliang/p/4449419.html
Copyright © 2011-2022 走看看