您现在的位置是：网站首页> 编程资料编程资料
CSS3字体效果的设置方法小结_css3_CSS_网页制作_
2021-08-29
2137人已围观
简介 这篇文章主要介绍了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:
相关内容
- Content-type的说明即HTTP请求头的类型整理_HTML/Xhtml_网页制作_
- input元素[type="file"]时的样式定制及浏览器兼容性问题探讨_HTML/Xhtml_网页制作_
- checkbox的indeterminate属性使用介绍_HTML/Xhtml_网页制作_
- 如何点击a标签实现弹出input file上传文件对话框_HTML/Xhtml_网页制作_
- html中select optgroup标签使用介绍_HTML/Xhtml_网页制作_
- HTML教程:收集的常用的HTML标签(6)_HTML/Xhtml_网页制作_
- HTML表格标记教程(40):表头的暗边框色属性BORDERCOLORDARK_HTML/Xhtml_网页制作_
- 添加和删除HTML节点的简单示例_HTML/Xhtml_网页制作_
- HTML表格标记教程(42):表头的水平对齐属性ALIGN_HTML/Xhtml_网页制作_
- HTML表单标记教程(3):输入标记_HTML/Xhtml_网页制作_
