服务器端字体　　

　　在CSS3中可以使用@font-face属性来利用服务器端字体。

　　@font-face 属性的使用方法： 　　　

　　　　@font-face{

　　　　　　　　font-family:webFont;

　　　　　　　　src:url('字体名称.otf')format("opentype");

　　　　　　　　}

　　　　 　　　　font-family属性值中使用webfont来声明使用的是服务器端字体

　　　　　　　　src属性值中首先指定了字体文件所在的路径

　　　　　　　　format声明字体文件的格式，可以省略文件格式的声明，单独使用src属性值

　　　　　　　　字体文件的格式有 OpenType 和 TrueType

　　　　　　　　　　OpenType 值为opentype 文件扩展名为　.otf

　　　　　　　　　　TrueType后者的属性值是 truetype,文件扩展名为　.ttf


示例
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

<style  type="text/css">

   @font-face{

        font-family:webFont;src:url('font/twlsfont.ttf')format("truetype");}

    * {margin: 0; padding: 0;}

    .text {width: 500px; margin: 0 auto; font-family: webFont; }

</style>

</head>

<body>

    <div class="text">

        门前<br>

        我多么希望，有一个门口<br>

        早晨，阳光照在草上<br>

        我们站着<br>

        扶着自己的门扇<br>

        门很低，但太阳是明亮的<br>

        草在结它的种子<br>

        风在摇它的叶子<br>

        我们站着，不说话<br>

        就十分美好<br>

        有门，不用开开<br>

        是我们的，就十分美好<br>

        早晨，黑夜还要流浪<br>

        我们把六弦琴交给他<br>

        我们不走了<br>

        我们需要土地<br>

        需要永不毁灭的土地<br>

        我们要乘着它<br>

        度过一生<br>

        土地是粗糙的，有时狭隘<br>

        然而，它有历史<br>

        有一份天空，一份月亮<br>

        一份露水和早晨<br>

        我们爱土地<br>

        我们站着<br>

        用木鞋挖着泥土<br>

        门也晒热了<br>

        我们轻轻靠着，十分美好<br>

        墙后的草<br>

        不会再长大了<br>

        它只用指尖，触了触阳光

    </div>

</html>
结果

所用字体下载：https://pan.baidu.com/s/15BC8B2JipH2EXggeA3e_xA

CSS-服务器端字体笔记的更多相关文章

  1. 《CSS揭秘》笔记（一）

    前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...

  2. CSS中文字体对照表

    http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html CSS中文字体对照表 css字体名可以使用2种Unicode格式,以“微软雅 ...

  3. CSS揭秘读书笔记 （一）

    CSS揭秘读书笔记      (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px  solid  hsla(0,0%,100%,.5); background: ...

  4. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  5. [css] 浏览器字体和css设置字体之间的关系

    原文链接:http://www.zhangxinxu.com/wordpress/2010/06/%E5%8F%AF%E7%94%A8%E6%80%A7%E4%B9%8B%E6%B5%8F%E8%A7 ...

  6. CSS定义字体间距 字体行与行间距

    CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性     属性含义     属性值 Word-s ...

  7. css中文字体乱码解决方案

    css中文字体乱码解决方案:把css编码和html页面编码统一起来.如果html页面是utf-8.css.js也统一成utf-8编码.还有一个避免中文乱码的办法就是把中文字体写成英文来表示 css中文 ...

  8. CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑

    CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti ...

  9. css 中文字体 unicode 对照表

    css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...

随机推荐

  1. 浅入深出ETCD之【简介与命令行使用】

    前言 你知道etcd吗?随着k8s的使用广泛之后,etcd被非常多的人所知道,同时又因为它可靠的分布式特性被很多人喜欢.所以,我准备有几篇博文来记录一下,从基本使用到线上部署再到原理分析,做一个系列. ...

  2. Java jsoup获取网页中的图片

    获取图片 package com.vfsd.net; import java.io.File; import java.io.FileOutputStream; import java.io.IOEx ...

  3. 深入理解JVM虚拟机

    JVM平台上还可以运行其他语言,运行的是Class字节码.只要能翻译成Class的语言就OK了.挺强大的. JVM厂商很多 垃圾收集器.收集算法 JVM检测工具 关于类的加载: Java代码中,类型( ...

  4. fashion MNIST识别（Tensorflow + Keras + NN）

    Fashion MNIST https://www.kaggle.com/zalando-research/fashionmnist Fashion-MNIST is a dataset of Zal ...

  5. 锐捷交换机如何配置远程管理地址（telnet）

    基本命令如下: hostname(config)#username admin password 123456  ------>telnet 登录账号为admin密码为123456 hostna ...

  6. MySQL数据类型：UNSIGNED注意事项（转）

    原文地址:https://www.cnblogs.com/blankqdb/archive/2012/11/03/blank_qdb.html 1. UNSIGNED UNSIGNED属性就是将数字类 ...

  7. UltraEdit 替换符

    1.在每行的最后一行添加字符串: 打开替换,在查找中输入 ^r  在替换栏中输入要替换的字符  再把下边的正则表达式勾选,然后开始或是全部替换就可以了 2.替换回车换行 在查找中输入 要替换的字符  ...

  8. 【转】kettle7.1资源库无法打开，找不到connect按钮的问题处理

    转自:https://www.aboutyun.com/home.php?mod=space&uid=71645&do=blog&id=3535 kettle是一个比较好用的E ...

  9. 无限用teamviewer的一种方法,虚拟机中装teamviewer

    可以使用window 多用户可以同时远程登陆的特性(win服务器版自动支持多用户同时远程登陆,非服务器版需要其他方法开启) 1.在window建立两个用户,如a,b. 2安装虚拟机vmware,安装操 ...

  10. Oracle Spatial分区应用研究之六：全局空间索引下按县分区与按省分区效率差异原因分析

    1.实验结论 全局空间索引下,不同分区粒度之所有效率会有不同,差异并不在于SDO_FILTER操作本身,而在于对于数据字典表的访问次数上: 分区越多.表上的lob column越多,对数据字典表的访问 ...