css的@font-face和box-shadow、text-shadow属性

1.@font-face属性（引入字体）

@font-face {font-family: Economica-Bold-OTF;src: url("font/Economica-Bold-OTF.otf") format("OpenType");
}
@font-face {font-family: DroidSans-Bold;src: url("font/DroidSans-Bold.ttf") format("TrueType");
}

注意：在当本地字体文件格式不同时，同时也需要修改后面的format。如下：

TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)、OpenType字体（压缩的TrueType字体）

考虑兼容性

@font-face {font-family: 'droidSans';src: url('droidSans.eot'); /* IE9+ */src: url('droidSans.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */url('droidSans.woff') format('woff'), /* chrome、firefox */url('droidSans.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('droidSans.svg#fontname') format('svg'); /* iOS 4.1- */
}

（图片来源：@font-face - CSS @font-face详解-CSS教程 (caibaojian.com)）

2.box-shadow

box-shadow : h-shadow v-shadow blur spread color inset;

值	说明
h-shadow	水平阴影，即左右侧阴影（为负值时，阴影在左侧）
v-shadow	垂直阴影，即上下阴影（为负值时，阴影在上侧）
blur	模糊距离
spread	阴影大小
color	阴影颜色
inset	添加时，阴影转为内侧阴影

.box{box-shadow:0px 1px 2px grey;  //阴影在正下方box-shadow:1px 1px 2px grey;  //阴影在右下方box-shadow:-1px 1px 2px grey;  //阴影在左下方box-shadow:1px -1px 2px grey;  //阴影在右上方box-shadow:inset 0px 0px 2px grey;
}

3.text-shadow

text-shadow:inset 0px 0px 2px grey;同上

css的@font-face和box-shadow、text-shadow属性相关推荐

文字在阴影层上面 css,CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3)...
CSS3中p-tag上的双重文字阴影(Double text shadow on p-tag in CSS3) 是否可以使用CSS3在一个p-tag上应用两个文字阴影? 我想用1像素边框创建一个非常浅 ...
CSS的font和font-size
引用原帖收藏于IT老兵驿站. 前言今天遇到一个问题,没有搞明白font和font-size的关系,研究了https://www.w3schools.com/css/css_font.asp这个帖子 ...
css的font修改颜色,css的font字体颜色如何设置
css的font字体颜色设置方法:1.直接在标签上使用"color:颜色"设置字体颜色:2.通过给font标签添加class属性,在css标签中通过该class设置字体颜色. 本教 ...
深入理解CSS：font metrics, line-height 以及 vertical-align
转载自:http://web.jobbole.com/91180/ 深入理解CSS:font metrics, line-height 以及 vertical-align 2017/04/28 · C ...
Font Awesome html源码,CSS 中Font Awesome 图标（附码表）
HTML中缩放的矢量图标,您可以使用CSS所提供的所有特性对它们进行更改,包括:大小.颜色.阴影或者其它任何支持的效果. 部分图标: 其他效果图: 调用实例: Font Awesome图标调用实例 N ...
tp view html 引用css,TP5.1：将外部资源引入到框架中（css/js/font文件）
为了让我们的框架形式变得更加好看,我们需要加入Bootstrap和Jq文件到框架中 1.通过Bootstrap和jq官网进行相关文件的下载 (1)Bootstrap下载地址:https://v3.bo ...
CSS3 Text Shadow
css2的时候已经有了text-shadow这个属性,但是css2.1的又删除了这个属性,css3又重新使用了这个属性: 语法: text-shadow:1px 2px 3px #FFF; text- ...
css里td自带什么属性,关于css标签的属性（text文本属性，背景background，表格标签table，td标签属性）...
简介这篇文章主要介绍了关于css标签的属性(text文本属性,背景background,表格标签table,td标签属性)以及相关的经验技巧,文章约1129字,浏览量216,点赞数4,值得参考! te ...
【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的基本概念和术语 2. flex 属性: 设置伸缩 ...
web前端入门到实战：css选择器四大类：基本、组合、属性、伪类
什么是选择器?选择器的作用是通过它可以找到元素,把css样式传递给元素!css选择器主要分为:基本选择器.属性选择器.组合选择器与伪类选择器四个大类! css基本选择器基本选择器又分为:通配符.标签 ...

css的@font-face和box-shadow、text-shadow属性

css的@font-face和box-shadow、text-shadow属性

1.@font-face属性（引入字体）

2.box-shadow

3.text-shadow

css的@font-face和box-shadow、text-shadow属性相关推荐

最新文章

热门文章