4-5、CSS3文本与字体

4-5、CSS3文本与字体

文本阴影:

阴影文本:
text-shadow : h-shadow | v-shadow | blur | color;
水平偏移、竖直偏移、模糊距离、颜色
注意:这里的颜色可以使用rgba,进行半透明处理。

文本轮廓:
text-outline : thickness | blur | color ;
宽度值、模糊距离、颜色
很遗憾,兼容性上如今主流浏览器都不支持。

自动换行的处理方法:
word-break : normal | break-all | keep-all ;
三个值分别是:正常的、所有地方、半角空格或者连字符地方换行。
注意,keep-all 在中文的时候容易产生不易调整的效果,尽量不要使用。
例子:
在这里插入图片描述

在这里插入图片描述

允许长单词URL地址换行到下一行。
word-wrap : normal | break-word ;
两个值:默认、断开。
注意:只针对长单词URL地址,对中文不起效果。
例子:
在这里插入图片描述

规定如何对齐文本的最后一行:
text-align-last : auto | left | right | center | justify |start | end | initial | inherit;
默认值、向左对其、向右对齐、居中对齐、两端对齐、开头对齐、与开头相反对齐、设置默认值、父元素对齐方式。
只有IE和谷歌50+支持,火狐需要加上-moz

当文本溢出包含元素时,怎么处理:
text-overflow : clip | ellopsis | string ;
修剪文本、修剪跟个… 、自定义修剪后显示什么(最后一个只有火狐兼容)

这里在使用的时候,得先加上overflow:hidden;溢出隐藏。
在这里插入图片描述


字体:

@font-face
在这里插入图片描述
在这里插入图片描述

格式:

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
svg格式IE和火狐不兼容。


模板:

写的时候把模板放进去,直接改。
在这里插入图片描述
在这里插入图片描述

如何获取字体

https://www.fontsquirrel.com/tools/webfont-generator
下载一个格式的字体,上传上去之后,转换成各种需要的字体。
红色勾选上,上方选第三个,然后把需要的字体选出来就可以了,SVG、EOT Compressed二选一。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值