zoukankan      html  css  js  c++  java
  • 定义新的字体/引入字体文件方法总结

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <style>
            /* 两种定义字体的方法: */
            @font-face {
                font-family: 'PingFang';
                src: url('pingfang/PingFang Regular.eot');
                src: local('PingFang Regular'),
                    local('PingFang'),
                    url('pingfang/PingFang Regular.woff') format('woff'),
                    url('pingfang/PingFang Regular.ttf') format('truetype'),
                    url('pingfang/PingFang Regular.svg#PingFang Regular') format('svg');
            }
            @font-face {
                font-family: 'ping fang';
                src: url('pingfang/PingFang Regular.eot');
                src: url('pingfang/PingFang Regular.eot?#iefix') format('embedded-opentype'),
                url('pingfang/PingFang Regular.woff') format('woff'),
                url('pingfang/PingFang Regular.ttf') format('truetype'),
                url('pingfang/PingFang Regular.svg#PingFang Regular') format('svg');
                font-weight: normal;
                font-style: normal;
            }
            h1{font-family: "微软雅黑";font-weight: 400;}
            .demo{font-family: PingFang;}
            h2{font-family: ping fang;font-weight: 400;}
        </style>
    </head>
    <body>
        <h1 class="demo">大厦将颠沙井街道哦啥老东家是</h1>
        <h1>大厦将颠沙井街道哦啥老东家是</h1>
        <h2>大厦将颠沙井街道哦啥老东家是</h2>
    </body>
    </html>

    下载的字体是ttf格式的,需要通过转换工具再转化成eot、woff、svg、otf格式的字体文件

    推荐字体格式转换网址:https://www.fontke.com/tool/convfont/

    注意:一般引用的中文字体文件都是很大的,这样就会影响页面的加载速度

    从网上下载的苹方字体分为几种类型的,本案例只演示了常规字体的引用方法,其他类型的字体套用即可。

  • 相关阅读:
    hibernate注解note
    hibernate的批量删除
    hibernate实现多表联合查询
    hibernate联合主键注解方式
    jsp之radio取值与赋值
    @Transient注解的使用
    工程师如何在工作中提升自己?(公众号)
    HTML中让表单input等文本框为只读不可编辑的方法
    ajax, jQuery, jQueryeasyUI
    关于easyui的问答(来自百度问答)
  • 原文地址:https://www.cnblogs.com/moumou0213/p/7102695.html
Copyright © 2011-2022 走看看