码迷,mamicode.com
首页 > Web开发 > 详细

关于前端开发一些css的技巧

时间:2018-12-14 00:59:37      阅读:235      评论:0      收藏:0      [点我收藏+]

标签:content   sky   前端   htm   ali   alt   meta   性能   code   

 

文本属性连写: 

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
 p {
   font-size: 16px;
   font-weight: bold;
   font-family: 微软雅黑;
   font-style: italic;
   line-height: 40px;
 }
</style>
</head>
<body>
<p>文本属性连写</p>
<p>文本属性连写</p>
</body>
</html>
 
在浏览器中显示为:
技术分享图片
font-weight: bold;建议写成font-weight: 700,因为700大概等于bold,其中font-weight取值范围在100~900;

将style的p修改为

p {
font: italic 700 16px/40px 微软雅黑
}

浏览器效果和上边是一致的:

技术分享图片

 

 

可能你会有所困惑,一定字体风格在前,然后接着写字体粗细、字体大小、行高、那种字体么?

我在这建议采用这种,语法: font: font-style font-weight font-size/line-height font-family;

可不需要行高:  font: font-style font-weight font-size font-family;

里面文字大小和字体为必写;只写一个字体大小,font: 16px;是不被执行,直接写font-size: 16px;即可。

 

当然你打开搜狐主页,会发现人家的字体写成如下图:

技术分享图片

一个unicode编码,因为你写成中文还是得转化为unicode编码,再被浏览器引擎解析,直接写成unicode编码省去转换过程,是为提高网页性能。

当然你要写宋体、微软雅黑等字体的unicode编码值会发现记忆很麻烦,在这我教一个简单的小技巧。

第一步:打开浏览器,按住F12;

第二步:打开Console界面;

第三步:输入          ‘   escape("宋体")  ’;

技术分享图片

 

第四步:将%u改成 ’ \ ‘ 即可;

 这便是宋体的unicode编码   ‘ \5B8B\4F53 ’
 
欢迎大家一起学习,一起学习和分享使我快乐!
 前端开发-Sky

关于前端开发一些css的技巧

标签:content   sky   前端   htm   ali   alt   meta   性能   code   

原文地址:https://www.cnblogs.com/360home/p/10117067.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!