CSS3新增的服务器字体

1、使用服务器字体

使用服务器字体非常简单,只要使用@font-face定义服务器字体即可。格式如下:

@font-face{

font-family:name;

src:url(url) format(font-format);

}

到目前为止,服务器字体还只支持TrueType格式和OpenType格式。

2、定义粗体字和斜体字

@font-face{

font-family:CrazyIt;

src:url("Delicious-Bold.otf") format("OpenType");

font-weight:bold;

}

3、优先使用客户端字体

@font-face{

font-family:CrazyIt;

src:local("Goudy Stout"), url("Blazed.ttf") format("TrueType");

}

时间: 2024-10-15 14:41:59

CSS3新增的服务器字体的相关文章

CSS3新增属性text-shadow详解及燃烧的字体实战开发

今天我们有很多程序员在给文本设置样式时,都感觉无从下手.一般有两种情况: 1) 不知道关于文本到底有哪些样式属性: 2) 即使借助开发工具的自动提醒,依然不清楚样式属性的具体意思,以及具体用法. 今天这篇文章,我将带领大家一起来领受CSS3在文本样式应用方面的超强能力.通过精彩的实例,来使大家重新认识CSS3文本样式,真心希望大家通过此篇文章,即使不能做到精通CSS3的文本样式的应用,也会做到熟练应用. 实例: 如何利用CSS3制作燃烧的字体? 以前,如果我们网页上想要显示一个燃烧着的文本,大家

CSS3之嵌入Web字体

之前如果想在自己的网站使用某些好看的字体,总是迫不得已得在PS里先把字体图片做好.虽然这样做也能达到我们想要的效果,但是这样就增加了HTTP请求(如果在多处使用的话),即使合并所有图片,也不好管理,灵活性不高,哪一天想换种更好看的字体,那工作量,想想都没劲!幸好CSS3新增了@font-face模块,可以帮助我们轻松解决Web页面中使用优雅字体的方式,而且我们可以根据需要自定义多种字体,但是每个@font-face只能定义一种,若需要多个字体就启用多个@font-face规则. @font-fa

css3新增功能

CSS3新增功能 1 CSS3选择器详解 1.1 基础选择器 通配选择器* 元素选择器E ID选择器#id CLASS选择器.class 群组选择器select1,selectN 1.2 层次选择器 后代选择器 E F 子选择器 E>F 相邻兄弟选择器 E+F 通用兄弟选择器 E~F 1.3 属性选择器 E[attr] 选择具有att属性的E元素. E[attr="val"] 选择具有att属性且属性值等于val的E元素. E[attr~="val"] 选择具

CSS3新增文本属性详述

CSS文本属性复习 1.white-space:对象内空格的处理方式 2.direction:文本流的方向 3.unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示.与direction属性一起使用 1.white-space:对象内空格的处理方式 nowrap 控制文本不换行 pre 空白会被浏览器保留 normal 默认状态 pre-line 合并空白 保留换行符 pre-wrap 保留空白 正常换行 nowrap经常配合text-overflow一起使用,使得超出部分显示

CSS3新增属性text-overflow(省略符)实战开发详解

有人会问,为什么我把text-overflow拿出来单独讲解.以前,当一行内容显示不完整的时候,想要显示省略符,需要通过javascript等手段. 但是CSS3引入了text-overflow省略符属性,只需要短短一行代码就可以实现,开发方式的简洁强大不言而喻. 这篇文章,我讲带领大家做一个<今日头条>新闻导航列表,带领大家领略text-overfow的强大魅力.先看一下效果: 好了,看完了效果,现在正式开始今天的开发旅程吧! 首先我们先创建html页面,代码如下所示(红色文字即是我们Dem

CSS3新增属性css版

最近学习CSS3,以下CSS文件中的内容来自CSS手册. 可直接调用此CSS查看效果. 若有遗漏,待发现后补充进去. @charset "utf-8"; /* ------------------------- 此文档收集并介绍CSS3新增属性 ------------------------ /*----------border-color--------- 设置对象边框的颜色. --------------------- 浏览器支持:Firefox3.0+ ------------

python学习第四十九天:CSS3新增

1 CSS3 的选择器 1.1 基本选择器 tagName .className #idName * slector,selector,selector 1.2 层级选择器 selector1 selector2 后代 selectoer1>selectoer2 子元素 selector1+selector2 紧邻在后面的兄弟元素 selector1~selector 后面所有兄弟元素 1.3 属性选择器 selector[attr] 包含指定的属性 selector[attr=value] 指

h5新增和css3新增

编辑器: webstorm, 英文版 sublime, hbuilder vscode, dwh5的新标签及特性(移动端用的多),,,,如果想在图片里面显示 “帅哥" 记得使用单双引号,外面是单引号,里面是双引号例如: <img src="" title='这里有一个"傻狗"'/>h5新增语义化标签:(对浏览器和搜索引擎友好,)div没有语义化, 都可能出现很多次 section元素 表示页面中的一个区块 article 元素: 表示页面中的一

CSS3新增特性

CSS3新增属性选择器 属性名称 含义 [att^="value"] 该属性的值以指定的值开始 [att$="value"] 该属性的值以指定的值结束 [att*="value"] 该属性的值包含指定的值,而无论其位置 RGBA透明度 当设置一个RGBA色彩的时候,参数依次设定为红.蓝.绿(可以位0~255或百分数)和通道Alpha(0~1之间) 多背景图片 用户可以使用多个属性来设置背景图片或特效效果,如background-image.bac