您现在的位置是：网站首页> 编程资料编程资料
CSS3字体效果的设置方法小结_css3_CSS_网页制作_
2023-10-07
346人已围观
简介 这篇文章主要介绍了CSS3字体效果的设置方法小结,包括阴影效果、省略号代替以及嵌入字体,需要的朋友可以参考下
1. 文本阴影 text-shadow
其实与阴影一样
text-shadow: X轴偏移量 Y轴偏移量 模糊半径 阴影颜色
注意: 1.color可以使用rgba色. 2.没有inset值
CSS Code复制内容到剪贴板
- .demo {
- width: 340px;
- padding: 30px;
- font: bold 55px/100% "微软雅黑";
- color: #566F89;
- background: #000;
- text-shadow: 2px 2px 0 #E4F1FF;
- }
2. 溢出文本 text-overflow, 用(...)省略标记.
CSS Code复制内容到剪贴板
- text-overflow:clip; /*表示剪切*/
- text-overflow:ellipsis; /*表示显示省略标记*/
- .test_demo{
- text-overflow:ellipsis;
- overflow:hidden;
- whitewhite-space:nowrap; /*强制文本在一行内显示*/
- width:200px;
- background:#ccc;
- }
- 超酷的IT技术学习平台（我是省略号）
3. 嵌入字体 @font-face
这个重点讲一下。
@font-face是CSS3中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中，随着@font-face模块的出现，我们在Web的开发中使用字体不怕只能使用Web安全字体，你们当中或许有许多人会不自然的问，这样的东西IE能支持吗？当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶。我的Blog就使用了许多这样的自定义Web字体，比如说首页的Logo，Tags以及页面中的手写英文体，很多朋友问我如何使用，能让自己的页面也支持这样的自定义字体，一句话这些都是@font-face实现的，为了能让更多的朋友知道如何使用他，今天我主要把自己的一点学习过程贴上来和大家分享。
首先我们一起来看看@font-face的语法规则：
CSS Code复制内容到剪贴板
- @font-face {
- font-family:
; - src:
[< format>][,[< format>]]*; - [font-weight:
]; - [font-style:
相关内容
- 节奏大师刷分辅助教程攻略 超越触动精灵的最新脚本刷分教程_手机游戏_游戏攻略_
- 节奏大师自由模式勋章种类 节奏大师勋章获得方法分享_手机游戏_游戏攻略_
- 扩散性百万亚瑟王学徒型卡牌隐藏的秘密_手机游戏_游戏攻略_
- 百万亚瑟王国服更新:四张新卡牌闪亮出场_手机游戏_游戏攻略_
- 愤怒的小鸟星球大战2人物玩偶获得方法 30多个人物玩偶收集_手机游戏_游戏攻略_
- 愤怒的小鸟星球大战2人物玩偶怎么用 人物玩偶如何传送_手机游戏_游戏攻略_
- 愤怒的小鸟星球大战2黄色问号关卡开启方法详细解析_手机游戏_游戏攻略_
- 愤怒的小鸟星球大战2小地图在哪里 小地图获取方法_手机游戏_游戏攻略_
- 愤怒的小鸟星球大战2玩法 过关规则详细解析_手机游戏_游戏攻略_
- 愤怒的小鸟星球大战2隐藏关卡如何开启 隐藏关卡开启条件介绍_手机游戏_游戏攻略_
