HTML5系列代码：使用声明的字体名称定义字体样式

font-family name 必需的。定义字体的名称。
src URL 必需的。定义该字体下载的网址（S）
font-stretch normal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded 可选。定义该字体应该如何被拉长。默认值是"正常"
font-style normal
italic
oblique 可选。定义该字体应该是怎样样式。默认值是"正常"
font-weight normal
bold
100
200
300
400
500
600
700
800
900 可选。定义字体的粗细。默认值是"正常"
unicode-range unicode-range 可选。定义该字体支持Unicode字符的范围。默认值是"ü+0-10
FFFF"

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>《游子吟》- 孟郊</title>
<style type="text/css">
@font-face {font-family: myfont;                               /* 声明字体名称 */src:url(../font/maozedong.ttf) format("truetype");    /* 指向服务器端的字体文件 */
}
body {padding:0 40px;
}
h1 {float:right;width:20px;margin:0 0 0 10px;padding:0;font-family:myfont;                                  /* 使用声明的字体名称定义字体样式 */font-size:33px;                                        /* 大小 */color:#f90;                                         /* 颜色 */text-shadow:3px 3px 3px #333;                       /* 阴影 */word-wrap:break-word;                               /* 边界换行，逗号可在行的开始位置 */
}
p {float:right;width:20px;padding:0;margin:0 20px 0 0;line-height:33px;font-family:myfont;                                  /* 使用声明的字体名称定义字体样式 */font-size:30px;                                        /* 大小 */color:#f90;                                         /* 颜色 */text-shadow:0 0 1px #fff;                           /* 阴影 */word-wrap:break-word;                               /* 边界换行，逗号可在行的开始位置 */
}
footer {float:right;width:20px;padding-top:80px;font-family:myfont;                                 /* 使用声明的字体名称定义字体样式 */font-size:30px;                                        /* 大小 */color:#f90;                                         /* 颜色 */text-shadow:0 0 3px #333;                           /* 阴影 */margin-right:30px;
}
</style>
<body>
<h1>游子吟</h1>
<p>慈母手中线，</p>
<p>游子身上衣。</p>
<p>临行密密缝，</p>
<p>意恐迟迟归。</p>
<p>谁言寸草心，</p>
<p>报得三春晖？</p>
<footer>孟郊</footer>
</body>
</html>

HTML5系列代码：使用声明的字体名称定义字体样式相关推荐

C#实现根据字体名称获取字体文件名
<简单测试.NET开源的PDF文档生成器QuestPDF>中提到,绘制文字时指定字体用的不是字体名称,而是字体文件名.之前学习C# GDI+.HTML5中的Canvas.Tkinter ...
c# 通过字体对话框获取字体名称和字体大小_PS插件神器：fonTags，超好用的PS字体管理插件（附安装方法）
在Photoshop 中想准确找到一款字体,是特别烦人的事,今天这个神器帮你搞定这个难题!这是一款由大神开发的Photoshop 插件,可以扫描字体.自动分组.文本预览等等,功能丰富,使用方便,一起来 ...
JavaAwtSwing笔记之查看所支持的字体种类字体名称获取字体列表
本地所支持的字体查看支持的本地字体列表查看支持的本体字体名称查看本地所支持的字体效果查看支持的本地字体列表 import java.awt.*; public class 查看支持的本地字体F ...
HTML5系列代码：框模型的大小
margin 简写属性在一个声明中设置所有外边距属性.该属性可以有 1 到 4 个值. 这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度. 块级元素的垂直相邻外边距会合并,而行内元 ...
HTML5系列代码：使用自定义图像来作为空距
white-space 属性设置如何处理元素内的空白. 这个属性声明建立布局过程中如何处理元素中的空白符.值 pre-wrap 和 pre-line 是 CSS 2.1 中新增的. <html& ...
HTML5系列代码：模仿杂志的多列版式
column-span 属性规定元素应横跨多少列. font-weight 属性设置文本的粗细. 该属性用于设置显示元素的文本中所用的字体加粗. 数字值 400 相当于关键字 normal,700 ...
HTML5系列代码：主色调红色的配色方案表
hsl() 函数使用色相.饱和度.亮度来定义颜色. HSL 即色相.饱和度.亮度(英语:Hue, Saturation, Lightness). 色相(H)是色彩的基本属性,就是平常所说的颜色名称,如 ...
HTML5系列代码：RGBA半透明效果
CSS 中的颜色有三种定义方式:使用颜色方法(RGB.RGBA.HSL.HSLA),十六进制颜色值和预定义的颜色名称. RGBA 是代表Red(红色) Green(绿色) Blue(蓝色)和 Alph ...
HTML5系列代码：给图像添加边框
border 属性在一个声明中设置所有边框属性. <html><head><title> 给图像添加边框</title></head>< ...

HTML5系列代码：使用声明的字体名称定义字体样式

HTML5系列代码：使用声明的字体名称定义字体样式相关推荐

最新文章

热门文章