图片
1、css3已经可以实现 img标签 和 img内图片分开处理的功能了。类似标签的背景图。 https://www.zhangxinxu.com/wordpress/2015/03/css3-object-position-object-fit/ 或 https://www.cnblogs.com/libo0125ok/p/8422617.html
图片的 object-fit 属性,是一个类似 background-size 功能的属性。
object-position 属性,是一个类似 background-position 的属性
2、
字体
1、字体锯齿和反锯齿
什么是字体锯齿和反锯齿 参考 : http://www.cnblogs.com/Renyi-Fan/p/9006077.html#_label1
2、字体系列: font-family 属性 (该属性值是安卓字体系列生效的。多个字体,从前往后,谁有效就用谁的) https://segmentfault.com/a/1190000006110417(推荐) 或 https://www.cnblogs.com/herozhi/p/5539757.html
a、操作系统有的字体,浏览器上都可以使用。(好像默认的就是 微软雅黑)
b、英文字体中大多不包含中文:所以 我们可以先进行英文字体的声明,这样不会影响到中文字体的选择,因此优先使用最优秀的英文字体,中文字体声明则紧随其次。
注意:表单元素,字体的属性无法继承body,需要单独设置字体【button, input, select, textarea】
font-family: Arial, "Microsoft YaHei";
c、中英文整合写法:
font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei";
d、推荐写法:
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
1、字体何时需要添加引号:
当字体具体某个取值中若有一种样式名称包含空格,则需要用双引号或单引号表示,如:
font-family: "Microsoft YaHei", "Arial Narrow", sans-serif;
如果书写中文字体名称为了保证兼容性也会添加引号,如:
font-family: "黑体-简", "微软雅黑", "文泉驿微米黑";
2、引用外部字体需要先使用 @font-face 加载字体进来。再去使用
注意:外部字体,常常会有版权问题,所以不能随便使用。而且中文字体的体积比较大,(一般字库全一点的中文字体动辄几Mb),所以较少人会使用外部字体,
如果真的需要引入,也可以考虑通过工具根据页面文字的使用多少单独生成中文字体,以减小文件大小。
@font-face { font-family: tonjay; src:url('font/tonjay-web.woff'), url('font/tonjay-web.ttf'), }
div{ font-family:tonjay; }
3、推荐一个免版权而且漂亮的中文字体思源黑体:
该字体为Adobe与Google推出的一款开源字体, 有七种字体粗细(ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy),完全支持日文、韩文、繁体中文和简体中文,字形优美。
4、手机端自带的字体库:(window有的字体,在安卓和ios不一定有。比如,宋体、黑体)
3、CSS 字体 大小
字体用相对单位,无法像标签宽度一样完全随着相对量而改变。因为字体有最小值的。
由于浏览器对字体渲染有最底值(一般最小要求12px)的原因。所以用相对单位一定要考虑汇算后,字体的大小不能小于12px,不然大一点的手机就会很小。每次用相对单位的话,一定要先知道多少相对单位大于12px(如: iPhone6_375px宽度的手机,html的字体大小为50px,则里面的字体大小必须大于等于0.24rem,小于这个值的字体,在小屏幕中每什么影响,因为浏览器都是以12px渲染的,但是在大屏幕上就会渲染很小的字体。)
文本
参考:https://www.cnblogs.com/tw1015/p/9019598.html 或 https://blog.csdn.net/weixin_43885459/article/details/84673274 或 https://blog.csdn.net/wh13267207590/article/details/80421816(css3新增的)
1、white-space:设置文档中的空白处
a、noraml: 默认忽略多个空格,只输出一个空格 .
b、nowrap: 强制不换行
c、pre:空格/缩进/换行 会给保留(输入的空格、缩进、换行都会有效。但是不会自动换行,遇到换行符才会换行,所以不常用)
d、pre-line:合并空表(只是换行有效,其它的和默认一样,即 空格和换行无效,但会自动换行)
e、pre-warp:保留空白/缩进,正常换行(与 pre 一样,但是可以换行,所以常用这个)
2、letter-spacing:控制字母之间的距离(汉子也是有效);
3、word-spacing:字间隔距离(会把空格隔开的 内容作为一个单词)
4、text-overflow:当文本溢出包含元素时发生的事情;(这个属性有效的前提,必须设置属性 overflow:hidden;)
5、text-decoration :控制文本是否有下划线。(有下划线,删除线,上滑线)
6、text-align:(这里要注意 justify 值,两端对齐。常用)
6、word-wrap:允许对长的不可分割的单词进行分割并换行到下一行
7、word-break:规定非中日韩文本的换行规则。
8、text-align-last 设置如何对齐最后一行或紧挨着强制换行符之前的行。
9、writing-mode:定义了文本水平或垂直排布以及在块级元素中文本的书写方向。 https://www.runoob.com/cssref/css-pr-writing-mode.html
10、