CSS 字体属性定义文本的字体系列, 大小, 加粗, 风格 (如斜体) 和变形(如小型大写字母)font-family 控制字体, 由于各个电脑系统安装的字体不尽相同, 但是基本装有黑体, 宋体与微软雅黑这三款字体, 通常这样写 font-family:"黑体", "宋体","Microsoft YaHei"
font-size 控制字体大小, 我们设置字体大小是设置它的宽度, 它的高度一般电脑系统默认字体大小是 16px, 所以字体大小尽量不要低于 16px,1em=16px; font-weight: bold;/* 控制字重 一般是 100-900 常用 lighter(细体) normal(正常)bold 加粗 */ 至于这个 font-style, 一般默认是 normal, 也就是正常的, 如果说你设置 font-style: italic; 斜体话, 其实和这个 < em></em > 的效果是差不多的; 文字间的间距用的 line-height 如果和高度相等话, 就是垂直居中了.
通常 font 字体的简写: font:style weight size/line-heigt font-family / 要求必须出现的 2 个是 size 与 font-family/
专门建立的学习 Q-q-u-n: 784783012 , 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习技巧
(从零基础开始到前端项目实战教程, 学习工具, 全栈开发学习路线以及规划)
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>CSS 常用样式 font 字体的多种变换</title>
- <style>
- div{
- font-family: 'Microsoft YaHei';/* 微软雅黑 */
- /* font-family: 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; */
- /* 字体加上双引号或者单引号, 当有多个字体的时候, 中间逗号分开 */
- color:#f90;
- font-size: 24px;/* 控制字体大小 */
- font-weight: bold;/* 控制字重 常用 lighter(细体) normal(正常)bold 加粗 */
- font-style: italic;/* 等同于 em*/
- line-height: 30px;
- }
- /*font 字体的简写: font:style weight size/line-heigt font-family*/
- /* 要求必须出现的 2 个是 size font-family*/
- p{
- font: 24px/1.5em 'Lucida Sans','Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
- letter-spacing: 1px;/* 英文字母间距 */
- Word-spacing: 10px;/* 英文单词间距 */
- }
- P::first-letter{
- text-transform: capitalize;
- }/* 第一个字母::first-letter*/
- p::first-line{
- color:red;
- }/* 第一行::first-line*/
- </style>
- </head>
- <body>
34 <div > 技术为王世界, 欲问青天山顶景色是否独好技术为王世界, 欲问青天山顶景色是否独好技术为王世界, 欲问青天山顶景色是否独好技术为王世界, 35 欲问青天山顶景色是否独好技术为王世界, 欲问青天山顶景色是否独好技术为王世界, 欲问青天山顶景色是否独好技术为王世界, 36 欲问青天山顶景色是否独好技术为王世界, 欲问青天山顶景色是否独好 </div>
- 37 <p>Technology is king world, I want to ask if the scenery on the top of Qingtian Mountain is the king of technology, 38 I want to ask whether the scenery of Qingtian Peak is the king of technology. If the technology is the king of the world, 39 I would like to ask whether the scenery on the top of Qingtian Mountain is the king of the world. Is the scenery good?</p>
- 40 </body>
- 41 </HTML>
关于样式继承问题 / 与文字有关样式会被继承下去 / 代码展示如下:
- <!doctype HTML>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8">
- <title>index</title>
- <style>
- p{
- font-size: 20px;
font-family: 微软雅黑;
- color:#f00;
- font-weight:bold;
- font-style:italic;
- Word-spacing:15px;
- }
- </style>
- </head>
- <body>
- <div>
- <p><span>Linux PHP Linux</span></p>
- <p><span>Linux Linux PHP Linux</span></p>
- <p><span>Linux Linux PHP Linux</span></p>
- <p><span>Linux Linux PHP Linux</span></p>
- </div>
- </body>
- </HTML>
来源: http://www.jianshu.com/p/e33b4949fe7d