CSS3文本与字体
一、CSS3 换行
1、word-break(规定自动换行的处理方法)
word-break: normal / break-all / keep-all; /*
normal:使用浏览器默认的换行规则
break-all:允许在单词内换行
keep-all:只能在半角空格或连字符处换行
*/
兼容性:IE5.5+、FireFox15+、Chrome4+、Safari3.1+、Opera15+
2、word-wrap(允许长单词或 URL 地址换行到下一行)
word-wrap: normal / break-word; /*
normal:只在允许的断字点换行(浏览器保持默认处理)
break-word:在长单词或 URL 地址内部进行换行
*/
兼容性:IE5.5+、FireFox3.5+、Chrome23+、Safari6.1+、Opera12.1+
二、CSS3 新文本属性
1、text-align-last(规定如何对齐文本的最后一行)
text-align-last: auto / left / right / center / justify / start / end / initial / inherit; /*
auto:无特殊对齐方式
justify:内容两端对齐
start:内容对齐开始边界
end:内容对齐结束边界
*/
兼容性:text-align-last 属性只有IE支持,在Firefox中需要加上其前缀“-moz”, Chrom50.0.2661.102以上
注意(text-align-last 只有在 text-align 属性设置为 "justify" 时才起作用)
2、overflow(溢出文本的显示 / 隐藏)
overflowt: visible / hidden;
3、text-overflow(规定当文本溢出包含元素时发生的事情)
text-overflow: clip / ellipsis / string; /*
clip:修剪文本
ellipsis:显示省略符号“…”来代表被修剪的文本
string:使用给定的字符串来代表被修剪的文本
*/
兼容性:IE6.0+、FireFox7.0+、Chrome4.0+、Safari3.1+、Opera11.1+(9.0 -o-)
4、text-shadow(文本阴影)
text-shadow: h-shadow v-shadow blur color;
兼容性:IE10+、FireFox3.5+、Chrome4+、Safari4+、Opera9.5+
三、CSS3 字体
1、CSS3 @font-face的语法规则
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];} /*
YourWebFontName:自定义的字体名称,将被引用到Web元素中的font-family
source:自定义的字体的存放路径,可以是相对路径也可以是绝路径
format:自定义字体的格式,主要用来帮助浏览器识别
weight:定义字体是否为粗体
style:定义字体样式,如斜体
*/
兼容性:IE9+、FireFox3.5+、Chrome4+、Safari3.2+、Opera10+
2、CSS3 @font-face的字体格式
TureTpe (.ttf)(Windows和Mac的最常见的字体,是一种RAW格式,因此不为网站优化)
兼容性:IE9+、FireFox3.5+、Chrome4+、Safari3+、Opera10+、IOS Mobile Safari4.2+
OpenType (.otf)(被认为是一种原始的字体格式,内置在TureType的基础上,所以也提供了更多的功能)
兼容性:FireFox3.5+、Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari4.2+
Web Open Font Format (.woff)(Web字体中最佳格式,是开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离)
兼容性:IE9+、FireFox3.5+、Chrome6+、Safari3.6+、Opera11.1+
Embedded Open Type (.eot)(IE专用字体,可以从TrueType创建此格式字体)
兼容性:IE4+
SVG (.svg)(基于SVG字体渲染的一种格式)
兼容性:Chrome4+、Safari3.1+、Opera10+、IOS Mobile Safari3.2+
3、CSS3 @font-face字体的应用
通用模版
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* 所有主流浏览器 */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
}
字体文件+CSS模板一键生成网站:https://www.fontsquirrel.com/tools/webfont-generator
CSS3文本与字体的更多相关文章
- css3基础-文本与字体+转换+过渡+动画+案例
Css3文本与字体 文本阴影 h1 { text-shadow: 5px 5px 5px red; } word-break换行: h1:nth-child(1) { word-break: no ...
- CSS3入门之文本与字体
1.CSS3文本效果 1.1.text-shadow文本阴影 语法:text-shadow: h-shadow v-shadow blur color;(<水平阴影>,<垂直阴影&g ...
- css3新增边框、阴影、边框、背景、文本、字体
css3和css有什么区别?简单来讲css3是css(层叠样式表)技术的升级版本,css3新特征有很多,例如圆角效果.图形化边界.块阴影与文字阴影.使用RGBA实现透明效果.渐变效果.使用@Font- ...
- CSS3文本温故
1.CSS早期属性,分为三大类:字体.颜色和文本: 2.CSS文本类型有11个属性: 注:还有一个颜色属性:color,主要用来设置文本颜色 3.CSS3文本阴影属性:text-shadow语法:te ...
- css3 文本记
css3 文本 在css文本功能上主要分为三大类:字体,颜色和文本. text-shadow 设置文本阴影 text-shadow:color x-offset y-offset blur-radiu ...
- 3.css3文字与字体
1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...
- CSS SANS – 神奇!使用 CSS3 创建的字体
在我们的认识中,CSS 所能做的就是改变网页的排版布局,调整字间距等.然而,这里我们要介绍的则是使用 CSS3 制作字体.CSS SANS 可以通过 CSS 技术创建的A-Z字体,一起来围观下. 在线 ...
- 第 21 章 CSS3 文本效果
学习要点: 1.文本阴影 2.文本裁剪 3.文本描边 4.文本填充 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS3 中文本效果,其中也包含一些之前讲过的 CSS3 文本属性. 一.文本阴影 ...
- Cool!15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
随机推荐
- CMMI 能力成熟度模型集成
关于CMMI的过程域,请参考 CMMI能力成熟度模型集成的过程区域 1.CMMI/SPCA概述 CMM是“能力成熟度模型(Capability Maturity Model)”的英文简写,该模型由美国 ...
- HDU4099-Revenge of Fibonacci(trie树+数学基础)
Revenge of Fibonacci Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 204800/204800 K (Java/ ...
- 构建自己的PHP框架(Redis)
完整项目地址:https://github.com/Evai/Aier Redis 简介 'Redis' 是一个高性能的 'key-value' 数据库,其 'value' 支持 'String'.' ...
- XP双网卡不能上网的问题
转载. 现在很多本本都是双网卡配置,让两个网卡分别负责连接内外网能够加快上网速度和连接稳定,但不少网友照做后会出现无法上网的情况,这是由于默认网关冲突所导致的.那么该如何处理让双网卡各行其是,互不干扰 ...
- 获取 UIElement 相对于屏幕原点所占用的矩形区域
原文:获取 UIElement 相对于屏幕原点所占用的矩形区域 <Grid Background="Transparent"> <StackPanel Margi ...
- C#读取文件夹特定文件的方法
public image[] getImages() { FolderBrowserDialog fbd = new FolderBrowserDialog(); if (fbd.ShowDialog ...
- AR研究-Demo集
原文:AR研究-Demo集 之前研究了图像处理.图像识别及AR 等相关技术,下载了很多开源源码进行学习和尝试引用,包括c++.c#.Opengl.Emgu. Aforge.OpenCV. ...
- 【转载】MySQL和Keepalived高可用双主复制
服务器主机IP和虚拟浮动IP配置 RealServer A 192.168.75.133 RealServer B 192.168.75.134 VIP A 192.168.75.110 VIP B ...
- Rust这种新型的语言注定火不起来,功能太强大(特性太多),还不如用成熟稳定强大的C/C++,而且生态不行、所以恶性循环
这种新型的语言注定火不起来,功能太强大(特性太多),还不如用成熟稳定强大的C/C++,,而Golang足够简单,入门快,编译快,性能也强悍,解决了服务端开发人员的痛点,,注定被大多数人接受... go ...
- Pytorch Code积累
2017 Python最新面试题及答案16道题 15个重要Python面试题 测测你适不适合做Python? torch.squeeze() Returns a tensor with all the ...