CSS-服务器端字体笔记
服务器端字体
在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-服务器端字体笔记的更多相关文章
- 《CSS揭秘》笔记(一)
前言 我们在现代 CSS 中所面临的挑战已经不在于如何绕过这些转瞬即逝的浏览器 bug.如今的挑战是,在保证 DRY ① .可维护.灵活性.轻量级并且尽可能符合标准的前提下,把我们手中的这些CSS特性 ...
- CSS中文字体对照表
http://hotoo.googlecode.com/svn/trunk/labs/css/css-fonts.html CSS中文字体对照表 css字体名可以使用2种Unicode格式,以“微软雅 ...
- CSS揭秘读书笔记 (一)
CSS揭秘读书笔记 (一) 一.半透明边框 要想实现半透明边框可以使用border: border: 10px solid hsla(0,0%,100%,.5); background: ...
- css居中学习笔记
css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...
- [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 ...
- CSS定义字体间距 字体行与行间距
CSS定义字体行间距 line-height:xxpx; CSS定义字体间距 下面我们讲述一下CSS的文本属性,还是先来看一下文本属性的详细列表: 属性 属性含义 属性值 Word-s ...
- css中文字体乱码解决方案
css中文字体乱码解决方案:把css编码和html页面编码统一起来.如果html页面是utf-8.css.js也统一成utf-8编码.还有一个避免中文乱码的办法就是把中文字体写成英文来表示 css中文 ...
- CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑
CSS中文字体的英文名称(simsun)宋体,(Microsoft YaHei)微软雅黑 华文细黑:STHeiti Light [STXihei] 华文黑体:STHeiti 华文楷体:STKaiti ...
- css 中文字体 unicode 对照表
css 中文字体可以用 unicode 格式来表示,比如“宋体”可以用 \5B8B\4F53 来表示.具体参考下表: 中文名 英文名 unicode 宋体 SimSun \5B8B\4F53 黑体 S ...
随机推荐
- npm 加速之 yarn cnpm pnpm
npm 加速之 yarn cnpm pnpm 有没有感觉到使用 npm 的时候很慢? 安装速度 几Kb/s 不说, 还装着装着出错了, 奇奇怪怪的问题.这种情况大多数还是因为网络的原因, 很多时候虽然 ...
- Python Linux系统管理与自动化运维
Python Linux系统管理与自动化运维 前言 第1章Python语言与Linux系统管理1 1.1Python语言有多流行1 1.2Python语言为什么流行3 1.3Python语言有什么缺点 ...
- 【tensorflow-v2.0】如何将模型转换成tflite模型
前言 TensorFlow Lite 提供了转换 TensorFlow 模型,并在移动端(mobile).嵌入式(embeded)和物联网(IoT)设备上运行 TensorFlow 模型所需的所有工具 ...
- cube-slide组件的应用
<template> <div> <cube-slide :data="items"/> </div> </template& ...
- 海康—SADP激活(设备网络搜索)
海康sadp搜索工具(SADPTool)用于从网络上搜索同一网段内的所有在线设备.可以修改设备的缺省密码,修改网络IP地址及端口号 ,子网掩码及网关地址,IPV6地址网关地址,HTTP端口号和设备序列 ...
- mysql新建用户host使用%但使用localhost无法连接
今天新建了一个用户,权限也给了,host设置的为% 但是使用该用户连接时出现如下错误 查看用户 mysql> select host,user,password from mysql.user; ...
- 【layui】【jquery】通过layero获取iframe的元素
$(layero).find('iframe').contents().find('#id'); $(layero).find('iframe').contents().find('#jqGridY' ...
- SQL Server ---- 创建好的表修改不了字段
注意这个 是 sqlserver 2008 R2 当修改字段后出现来这个错误 解决方法 1.点击工具 选择选项 2.选择 designers 把阻止更改点掉就行了 建议,改好之后最 ...
- C++ 智能指针 std::auto_ptr 分析
背景介绍: RAll机制 定义一个类来封装资源的分配和释放,在构造函数中完成资源的分配和初始化,在析构函数中完成资源的清理,从而保证资源的正确初始化和清理 ps:智能指针就是RAll机制的一种应用,智 ...
- FineUI 模板列动态删除方法
本来这是asp.net写法,跟fineui一点关系都没有,但是还是有人不会写不会查找.还是做个分享吧. <f:TemplateField runat="server" ...