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属性进行页面中的简单布局,但是也存在一些缺点, ...
随机推荐
- selenium基本操作
#coding=utf-8from selenium import webdriverfrom selenium.webdriver.common.keys import Keysfrom selen ...
- CSS以图换字的9种方法
前面的话 CSS以图换字的技术,很久都没人提起了.它是一种在h1标签内,使用图像替换文本元素的技术,使页面在设计和可访问性之间达到平衡.本文将详细介绍CSS以图换字的9种方法 文字隐藏 在h1标签中, ...
- c语言贪吃蛇详解3.让蛇动起来
c语言贪吃蛇详解3.让蛇动起来 前几天的实验室培训课后作业我布置了贪吃蛇,今天有时间就来写一下题解.我将分几步来教大家写一个贪吃蛇小游戏.由于大家c语言未学完,这个教程只涉及数组和函数等知识点. 上次 ...
- javaScript 验证码 倒计时60秒
<input type="button" id="btn" value="免费获取验证码" /> <script type ...
- Cesium中Clock控件及时间序列瓦片动态加载
前言 前面已经写了两篇博客介绍Cesium,一篇整体上简单介绍了Cesium如何上手,还有一篇介绍了如何将Cesium与分布式地理信息处理框架Geotrellis相结合.Cesium的强大之处也在于其 ...
- HDU4466 Triangle
题意:给一个长为N的铁丝,问你有几种方法将其划分为若干段,使得每一段都能围成一个边长为整数的三角形,并且围成的三角形都相似 思路其实很明显,三角形的周长必定是N的约数,那么答案就是周长C能围城的三角形 ...
- 关于SPI通信原理与程序实现
第一次接触SPI是因为当时用到NRF24L01,需要用SPI进行通信.因为2401上面写着MOSI.MISO.SS.RST,当时以为只要用到SPI就肯定有这几个引脚,以至于限制了自己的思维.只认识MI ...
- Hive修改行级别数据
我们知道Hive0.14版本之前是不支持行级别的插入,更新,删除的,0.14版本之后可以通过修改相关配置得以支持,但是在不修改默认配置的情况下是不是完全没有办法呢?不是的,这里有个比较简单的方法,前提 ...
- jquery 自定义选择器
// HTML 代码 <body> <div id="divid1" class="divclass">白色</div> & ...
- 快速序列化组件MessagePack介绍
简介 MessagePack for C#(MessagePack-CSharp)是用于C#的极速MessagePack序列化程序,比MsgPack-Cli快10倍,与其他所有C#序列化程序相比,具有 ...