css3中文字与字体相关的属性介绍

本篇文章给大家带来的内容是关于css3中文字与字体相关的属性介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

1 text-shadow属性

(1)功能

 给页面上的文字添加阴影效果。

(2)使用方法

text-shadow:length length length color (阴影离开文字的横方向距离、纵方向距离、阴影的模糊半径、阴影的颜色)

注意:

立即学习“前端免费学习笔记(深入)”;

阴影离开文字的横方向距离、纵方向距离:必须指定,可指定负值。

阴影的模糊半径:代表阴影向外模糊时的模糊范围。这个半径值越大,则阴影向外模糊的范围也就越大。可选参数,省略时,默认为0,代表阴影不向外模糊。

阴影的颜色:可选参数,不指定时在CSS2中使用color属性的颜色(实际Firefox和Opera,其他不支持省略,省则不绘制),CSS3中使用浏览器指定的默认色。

(4)指定多个阴影

text-shadow:10px 10px #f39800,                         40px 35px #fff100,                        70px  60px #c0ff00;

 只有Chrome 、Firefox、Opera浏览器支持该功能。 

(3)浏览器支持

到目前为止:Safari、Chrome 、Firefox、Opera浏览器支持该属性。 

 text-shadow:5px 5px 5px gray;(灰色阴影,阴影离开分子的横纵方向均为5个像素)

2 word-break属性 

(1)功能:让文本自动换行

(2)值:normal(使用浏览器默认换行规则)、keep-all(只能在半角空格或连字符处换行)、break-all(允许在单词内换行)

(3)浏览器支持

到目前为止:Safari、Chrome 、IE浏览器支持该属性。 

3 word-wrap属性 

(1)功能:让长单词和URL地址自动换行。

(2)值:normal(浏览器默认处理)、break-word(在长单词或URL地址内部进行换行)

(3)浏览器支持:所有浏览器。

 4 Web Font与@font-face属性 

(1)功能:在网页上显示服务器端字体。

(2)使用方法:

@font-face{    font-famliy:WebFont;    src:url(‘font/Fontin_Sans_R_45b.otf’)  format(“opentype”);   font-weitht:normal;}h1{    font-family:WebFont;}

 5 font-size-adjust属性

(1)功能:修改字体种类而保持字体尺寸不变

(2)使用方法:

aspect值(比例值):可以用来在将字体修改为其他字体时保持字体大小基本不变。(常数)

计算方法:x-height值(使用该字体书写出来的小写X的高度(像素为单位))除以该字体的尺寸。

p{   font-size:16px;   font-famliy:Times New Roman;   font-size-adjust:0.46(aspect值)}

(3)浏览器对于aspect值的计算方法:

在font-size-adjust属性中指定aspect值并且将字体修改为其他字体后,浏览器对于修改后字体尺寸的计算公式:

c = (a / b)s

a:表示实际使用的字体的aspect值、b:表示修改前字体的aspect值、

s:表示指定的字体尺寸,c:浏览器实际显示时的字体尺寸。

(4)属性值可设为:”none“

等同于不对font-size-adjust属性进行设置,按照字体原来的大小显示。

6 使用rem单位定义字体大小

(1)rem字体尺寸单位根据页面上的根元素(一般指html元素)的字体大小而计算出实际的字体大小,不管元素的父元素的字体大小是多少。

html{font-size:62.5%}(大多数浏览器中,默认字体大小为16个像素,使用62.5%, 使浏览器自动计算出10个像素)small{font-size:1.1rem;}strong{font-size:1.8rem;}

 (2)浏览器支持:

到目前为止:包括IE9在内,所有浏览器都支持。

(3)兼容IE8及之前版本(不能使用rem字体单位)

html{font-size:62.5%}small{font-size:11px;font-size:1.1rem;}strong{font-size:18px;font-size:1.8rem;}

相关推荐:

css3如何利用选择器在页面中插入所需内容 (附代码)

css3中transform属性实现的4种功能(旋转、缩放、倾斜、移动)

以上就是css3中文字与字体相关的属性介绍的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1611238.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月24日 02:08:56
下一篇 2025年12月24日 02:09:12

相关推荐

  • css3如何利用选择器在页面中插入所需内容 (附代码)

    本篇文章给大家带来的内容是关于css3如何利用选择器在页面中插入所需内容 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1 使用选择器来插入内容 使用after或before选择器,在选择器的content属性中定义要插入的内容,当插入内容为文字的时候,必须要在插入文字的两旁加上…

    好文分享 2025年12月24日
    000
  • css3中背景属性中与边框相关的属性介绍

    本篇文章给大家带来的内容是关于css3中背景属性中与边框相关的属性介绍 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1 与背景相关的新增属性 background-clip:指定背景的显示范围。 background-origin:指定绘制背景图像时的起点。 backgroun…

    好文分享 2025年12月24日
    000
  • 如何用css实现直接画出三角形以及对话形式的三角形(附代码)

    本篇文章给大家带来的内容是关于如何用css实现直接画出三角形以及对话形式的三角形(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在商品展示中,画三角形的出现的也挺多的,左上角的三角标签,又或者对话形式的三角形,带阴影效果等,在此记录下 1、直接添加三角形 想你呦 body…

    2025年12月24日
    000
  • css的position属性有哪些?css中position属性及用法的介绍

    本篇文章给大家带来的内容是关于css的position属性有哪些?css中position属性及用法的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 position 属性介绍 (1)css中position 属性自 CSS2 起就有了,该属性规定元素的定位类型。所有主流浏览器…

    2025年12月24日 好文分享
    000
  • 如何使用CSS实现货车loader的效果

    本篇文章给大家带来的内容是关于如何使用css实现货车loader的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 代码解读 定义 dom,容器代表卡车,包含的 2 个子元素代表车头和尾气; 代表道路: 立即学习“前端免费学习笔记(深入)”; 居中显示,同时道路与页面之…

    2025年12月24日
    000
  • css3中animation属性实现箭头向右滚动渐隐的代码

    这篇文章给大家介绍的内容是关于css3中animation属性实现箭头向右滚动渐隐的代码,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 这是一个右箭头的小图标。 keyframes 创建一个css3动画用 animation 调用 并用延迟动画的办法 做出匀速滚动的效果。 直接贴上…

    好文分享 2025年12月24日
    000
  • CSS3制作动画的属性: transform属性的介绍

    本篇文章给大家带来的内容是关于CSS3制作动画的属性: transform属性的介绍 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 transform字面上就是变形,改变的意思。在css3中transform主要包括以下几种:旋转rotate、扭曲skew、缩放scale和移动t…

    2025年12月24日 好文分享
    000
  • CSS3属性:text-shadow文本阴影的使用方法

    本篇文章给大家带来的内容是关于css3属性:text-shadow文本阴影的使用方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 text-shadow还没有出现时,大家在网页设计中阴影一般都是用photoshop做成图片,现在有了css3可以直接使用text-shadow属性来…

    2025年12月24日 好文分享
    000
  • CSS布局有哪些?css常见的布局方式(附代码)

    css布局有哪些?css布局可以让页面看起来比较美观整洁,接下来的这篇文章给大家总结了css中常见的几种布局方式,让我们具体的看一看。 水平居中布局 1、margin + 定宽 Demo .child { width: 50px; margin: 0 auto; } 运行结果: 立即学习“前端免费学…

    2025年12月24日 好文分享
    000
  • 如何使用CSS实现过山车loader的动画效果

    本篇文章给大家带来的内容是关于如何使用css实现过山车loader的动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 代码解读 定义 dom,容器中包含 3 个元素,代表 3 个圆点: 立即学习“前端免费学习笔记(深入)”; 居中显示: body { margin:…

    2025年12月24日
    000
  • 如何使用纯CSS实现一头绿猪的效果

    本篇文章给大家带来的内容是关于如何使用纯css实现一头绿猪的效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/front-end-daily-ch…

    2025年12月24日
    000
  • 如何使用CSS实现圆点移动的动图效果

    这篇文章给大家分享的内容是关于如何使用css实现圆点移动的动图效果,有一定的参考价值,有需要的朋友可以从参考一下,希望对你有所帮助。 效果预览 源代码下载 https://github.com/comehope/front-end-daily-challenges 代码解读 定义 dom,容器中包含…

    2025年12月24日
    000
  • 如何用CSS和D3实现宇宙飞船的动态效果

    这篇文章给大家介绍的内容是关于如何用css和d3实现宇宙飞船的动态效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 代码解读 定义 dom,spacecraft 表示飞船,容器中包含 1 个表示尾冀的元素 fins: 居中显示: body { margin: 0; he…

    2025年12月24日
    000
  • 如何使用CSS实现变色旋转动画的动态效果

    这篇文章给大家介绍的内容是关于如何使用css实现变色旋转动画的动态效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 效果预览 代码解读 定义 dom,容器中包含 9 个元素: 居中显示: body { margin: 0; height: 100vh; display: flex…

    2025年12月24日
    000
  • 如何使用纯CSS实现一颗土星的效果

    这篇文章给大家介绍的文章内容是关于如何使用纯css实现一颗土星的效果,有很好的参考价值,希望可以帮助到有需要的朋友。 效果预览 代码解读 定义 dom,容器本身表示土星星球,其中的 ring 元素表示土星环: 居中显示: body { margin: 0; height: 100vh; displa…

    2025年12月24日
    000
  • 视频演示:如何用CSS 创作一颗逼真的土星 ?(附代码)

    效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/EpbaQX 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 立即学习“…

    2025年12月24日
    000
  • 实例讲解如何用CSS语言创作一根闪电连接线

    效果预览 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/RBjdzZ 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 立即学习“…

    2025年12月24日
    000
  • 如何用纯CSS实现动态行驶的火车

    这篇文章给大家介绍的文章内容是关于如何用纯css实现正在行驶中的火车,有很好的参考价值,希望可以帮助到有需要的朋友。 效果预览 代码解读 定义 dom,容器中包含 2 个元素,train 代表火车,track 代表铁轨,其中包含的 3 个 代表 3 根枕木。 居中显示: body{ margin: …

    2025年12月24日
    000
  • 如何使用CSS实现单元素点阵loader的效果

    这篇文章主要介绍了关于如何使用css实现单元素点阵loader的效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/front-end-daily-challe…

    2025年12月24日
    000
  • 如何使用纯CSS实现一台咖啡机的效果

    这篇文章主要介绍了关于如何使用纯css实现一台咖啡机的效果,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 源代码下载 每日前端实战系列的全部源代码请从 github 下载: https://github.com/comehope/front-end-daily-challenges …

    2025年12月24日
    000

发表回复

登录后才能评论
关注微信