服务器端字体  

  在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. clickhouse 19.14.m.n简单测试

    ClickHouse is a column-oriented database management system (DBMS) for online analytical processing o ...

  2. linux查看占用内存前10的命令

  3. http状态码610,613

    610  请求超时 613  dns解析错误

  4. matlab学习笔记13_2匿名函数

    一起来学matlab-matlab学习笔记13函数 13_2 匿名函数 觉得有用的话,欢迎一起讨论相互学习~Follow Me 参考文献 https://ww2.mathworks.cn/help/m ...

  5. PHP 字符串和十六进制互转

    今天在做项目中,因为要调用别人网站的接口,结果需要对请求和返回的时间进行十六进制加密处理,于是在网上查了下资料谢了一个转换Demo做个记录. 如果在TP下使用可以将下面函数放到common.php中 ...

  6. bladex开发自己的服务不推送服务器的方法

    一:问题 使用代码生成器 生成的代码,运行后,需要推送至服务器才可以进行调试,每次推送,启动服务至少半个小时以上,相当浪费时间,如何可以让开发的服务不推送至服务器能调试呢? 二:尝试解决 直接开发机运 ...

  7. Docker是什么?

    Docker是什么? Docker是一个虚拟环境容器,可以将你的环境.代码.配置文件等一并打包到这个容器中,并发布和应用到任意平台中.比如,你在本地部署了git,jenkins等,可以将其与插件一并打 ...

  8. EF Core使用遇到的问题

    目录 EF Core速度问题 问题描述 EF使用方法1,每一行存储一次(400条/s) EF使用方法2,链接不释放 (40条/s) EF使用方法3,多次add,一次SaveChanges(400条/s ...

  9. WeakReference Reference ReferenceQueue

    public class WeakReference<T> extends Reference<T> { public WeakReference(T referent) { ...

  10. ThinkPHP3开发模式,控制器操作,配置文件,框架语法

    ThinkPHP的开发模式 tp框架有两种使用模式:开发模式(调试模式),一种是生产模式(运行模式) define('APP_DEBUG', true);  //调试模式 define('APP_DE ...