CSS3 文字与字体相关样式
- 给文字添加阴影
- 文字换行
- 客户端文字
- font-size-adjust属性
给文字添加阴影-text-shadow属性
text-shadow:length length length color
前三个length分别指阴影离开文字横向距离、纵向距离（这两个参数允许值为负）和模糊半径（值越大模糊范围越大，默认为0，不模糊），color指定阴影的颜色
div {
text-shadow:5px 5px 10px gray;
}
让文本换行
很多浏览器本身自带换行功能，在css3中可以使用word-break来决定换行的处理方式
div {
word-break:keep-all;
}
| 值 | 换行规则 |
|---|---|
| normal | 使用浏览器的默认换行规则 |
| keep-all | 只能在半角空格或连字符处换行 |
| break-all | 允许在单词内换行 |
使用word-wrap属性来实现长单词与url地址的自动换行
word-wrap:break-word/normal;
//normal为默认处理
使用服务器端字体
在CSS3中，使用@font-face来利用服务器端的默认字体。
@font-face {
font-family: WebFont;
src:url('font/Fontin_Sans_R_45b.otf') format("opentype");
font-weight: normal;
}
src指定服务器端字体的字体文件所在路径
- TrueType字体：.ttf
- OpenType字体：.otf
- Embedded OpenType字体：.eot(EOT是OpenType的一种压缩形式。这种格式是专用的（Microsoft），仅IE提供支持。)
- SVG字体：.svg（Scalable Vector Graphics或SVG是一种通用图像格式，SVG字体使用这种格式表示字符。）
- Web开放字体格式：.woff（Web开放字体格式建立在TrueType基础之上，已经发展为Web字体的一个标准。大多数现代浏览器都对这种格式提供了很好的支持。）
先引用客户端上的字体，没有再引用服务器端上的字体
@font-face {
font-family: MyArial;
src:local("Arial"),
url("KaushanScript-Regular.otf");
}
font-size-adjust属性
aspect的计算方法：x-height:58 font-size:100px aspect:0.58
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#div1{
font-family: Menlo;
font-size: 16px;
font-size-adjust: 0.60;
}
#div2{
font-family: cursive;
font-size: 16px;
font-size-adjust: 0.57;
}
#div3{
font-family: "Lantinghei SC";
font-size: 16px;
font-size-adjust: 0.57;
}
</style>
</head>
<body>
<div id="div1">Text sample</div>
<div id="div2">Text sample</div>
<div id="div3">Text sample</div>
</body>
</html>
CSS3 文字与字体相关样式的更多相关文章
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
一. CSS3 文字与字体相关样式 1. 给文字添加阴影 text-shadow: length length length ccolor; 属性适用于文本阴影,指定了水平阴影,垂直阴影,模糊的距离, ...
- web前端学习（三）css学习笔记部分（7）-- 文字和字体相关样式、盒子相关样式、背景与边框相关样式
12. 文字和字体相关样式 12.1 CSS3 给文字添加阴影 使用 text-shadow 属性给页面上的文字添加阴影效果,text-shadow 属性是在CSS2中定义的,在 CSS2.1 中 ...
- CSS3系列二（媒体支持、文字与字体相关样式、盒相关样式）
CSS3媒体支持 在css3中允许我们在不改变内容的情况下,在样式中选择一种页面的布局以精确的适应不同的设备,从而改善用户体验 可以利用meta标签在页面中指定浏览器在处理本页面时按照多少像素的窗口宽 ...
- [CSS3]学习笔记-文字与字体相关样式
1.给文字添加阴影 <!doctype html> <html> <head> <meta charset="utf-8"> < ...
- 3.css3文字与字体
1.css3文字与字体: ①Font-size:大小. ⑴通常使用px.百分比.em来设置大小: ⑵xx-small.x-small.small.medium.large.x-large.xx-lar ...
- css3文字与字体样式
css3使用服务器端字体: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- css文字与文本相关样式
css文字属性定义文本的字体系列,大小,加粗,风格和变形 font-family 设置字体系列 font-size 设置字体的尺寸 font-style ...
- css3文字与字体的相关样式
给文字添加阴影——text-shadow属性 text-shadow属性是css2中定义的,在css2.1中删除了,在css3中恢复text-shadow:length length length c ...
- css3中的布局相关样式
web页面中的布局是指在页面中如何对标题.导航栏.主要内容.脚注.表单等各种构成要素进行合理编辑.在css3之前,主要使用float属性或position属性进行页面中的简单布局,但是也存在一些缺点, ...
随机推荐
- ptrdiff_t 和 size_t
size_t和ptrdiff_t常常用来指示数组长度. size_t常用于表示数组的大小,可以一般的将他看为 typedef unsigned int size_t,实质是一个无符号整形.包含在头文件 ...
- js监听浏览器离开页面操作
序言 大家是否经常遇到在关闭网页的时候,会看到一个确定是否离开当前页面的提示框?想一些在线测试系统.信息录入系统等就经常会有这一些提示,避免用户有意或者无意中关掉了页面,导致数据丢失.这里面的实现过程 ...
- HDU1171--01背包
Big Event in HDU Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others ...
- 如果Centos没有桌面，怎么修改IP地址
修改前备份!!! 修改前备份!!! 修改前备份!!! [PHP] 纯文本查看 复制代码 ? 1 vi /etc/sysconfig/network-scripts/ifcfg-eth0 编辑,输入以下 ...
- jvm内存回收诡异现象
在知乎上看到一篇提问,于是做了个实验帮助他解答,这里整理成一篇文章分享一下. 先看代码如下代码: /** * Created on 2017/12/16. * * -verbose:gc -XX:+U ...
- js模拟静态方法
//模拟静态 var Animal = function(name){ this.name = name; Animal.instanceCounter ++; }; Animal.instanceC ...
- KafkaManager中Group下不显示对应Topic的解决方案
一.软件版本 Kafka:0.8.2.1 KafkaManager:1.2.9.10 二.问题现象 点击Consumer下某个组,显示如下图所示的异常,查看KafkaManager的Applicati ...
- java 的equals 与== ,null与isempty的区别
1 . == 是为了判断等号两边 变量 所对应 的 内存中的 值 是否 相等, 只是 值 的比较. 2. 假如 String s1 = new String("abc") ...
- The literal of int xxxxx is out of range
有时候我们定义了long型的变量,当我们给该变量赋值过长的整数时,系统依旧会提示长度超过范围,解决的方法例如以下: long timeShow = 1437565243495L; 我们须要在整形变量的 ...
- Android笔记二十四.Android基于回调的事件处理机制
假设说事件监听机制是一种托付式的事件处理,那么回调机制则与之相反,对于基于回调的事件处理模型来说,事件源和事件监听器是统一的,或者说事件监听器全然消失了,当用户在GUI控件上激发某个事件时,控 ...