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仿造window7的开始菜单

    相当逼真,css3果然强悍。要留意的点依旧是哪几项,难点在于细节的微调,尤其是渐变背景的制作,css3中非常灵活,下次有机会,发篇css3渐变背景的详细教程。   相当逼真,css3果然强悍。友情提示:请勿在IE下浏览。来看下原作者的设计草图: 简明创建过程  第一步 :创建如下菜单结构 @@##@…

    2026年5月10日
    000
  • 怎么安装html5_HTML5开发环境安装与配置详细步骤

    答案是配置HTML5开发环境需三步:1. 安装VS Code等编辑器并配置插件;2. 使用Chrome或Firefox测试页面;3. 可选搭建本地服务器,如Live Server或http-server;最后创建index.html文件验证环境。 安装HTML5开发环境其实并不复杂,因为HTML5本…

    2026年5月10日
    000
  • 使用CSS Grid实现不规则列布局:告别传统表格的限制

    本教程详细阐述如何利用css grid实现复杂的、不规则的列布局,尤其适用于那些传统html表格难以实现的块状结构。文章将通过具体的css属性和html结构示例,指导读者如何定义网格、控制子项的跨度与位置,以及优化自动布局流程,从而高效构建灵活且响应式的页面布局。 1. 传统表格的局限与CSS Gr…

    2026年5月10日
    000
  • border-radius属性如何使用

    border-radius属性用于创建圆角,其使用语法是“border-radius: 1-4 length|%;”,border-radius是一个最多可指定四个“border -*- radius”属性的复合属性。 本文操作环境:Windows7系统、Dell G3电脑、HTML5&&a…

    2026年5月10日
    000
  • 详解img[src=””] img无路径情况下,灰色边框去除解决方法

    img[src=””]  img标签无路径情况下,灰色边框去除解决方案 1.Js解决办法 @@##@@ function whenError(a){ a.onerror=null; a.src=’path_default.jpg’; console.log(‘图片出错的时候调…

    用户投稿 2026年5月10日
    000
  • HTML5怎么制作天气应用_HTML5天气组件开发实战

    使用HTML5、CSS3和JavaScript结合OpenWeatherMap API可快速开发响应式天气应用。2. 页面结构包含输入框、按钮和结果显示区域。3. 通过fetch调用API获取实时天气数据,支持中文和摄氏度单位。4. 数据渲染包括城市名、温度、图标、湿度和风速,并用CSS美化界面。5…

    2026年5月10日
    000
  • 关于CSS3字体属性整理分析

     字体属性: Font-family: {font-family: name}           {font-family: cursive| fantasy | monospace | serif | sans-serif} Font-size: {font-size: 数值 | inherit…

    用户投稿 2026年5月10日
    000
  • 使用Flexbox实现内容居中布局:从页脚固定到内容对齐

    本文深入探讨了如何利用CSS Flexbox实现网页内容的精确居中对齐,尤其是在包含固定页脚的复杂布局中。我们将通过分析一个常见的布局问题,逐步讲解如何配置Flex容器及其子项的属性,如`display: flex`、`flex-direction`、`justify-content`和`text-…

    2026年5月10日
    000
  • 学习html5编程路径_从基础到项目实战路线【方法】

    需遵循由浅入深的学习路径:一、分阶段夯实HTML/CSS/JS基础与HTML5新API;二、通过待办列表、Canvas画板等微型项目整合技能;三、参与开源或复刻经典界面提升工程素养;四、用Vite等工具实践构建流程;五、打造可展示的全栈作品集。 如果您希望系统性地掌握HTML5编程技能,并最终能够独…

    2026年5月10日
    600
  • css权重是什么?css权重的介绍

    本篇文章给大家带来的内容是关于css权重是什么?css权重的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 1、什么是css权重?css6大基础选择器 css权重指的是css6大基础选择符的优先级,优先级高的css样式会覆盖优先级底的css样式,优先级越高说明权重越高,反之亦然…

    2026年5月10日
    100
  • 如何使用CSS的Grid布局实现小松鼠邮票的效果(附源码)

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

    2026年5月10日
    000
  • 使用CSS3实现鼠标悬停图片上浮显示描述的示例代码分享

    使用CSS3实现鼠标悬停图片上浮显示描述的示例代码分享使用CSS3实现鼠标悬停图片上浮显示描述的示例代码分享使用CSS3实现鼠标悬停图片上浮显示描述的示例代码分享使用CSS3实现鼠标悬停图片上浮显示描述的示例代码分享

    效果图: 代码如下: CSS3鼠标悬停图片上浮显示描述特效 – 何问起.hovertree-container{border:0px solid red;}.container{background-color:white}.hovertreeinfo{text-align:center;}a{co…

    2026年5月10日 用户投稿
    000
  • css3中新增加的颜色模式有哪些

    css新增了3种颜色模式:1、RGBA模式,是在RGB模式上新增了Alpha透明度,例“rgba(255,0,0,0.5)”;2、HSL模式,例“hsl(360,50%,50%)”;3、HSLA模式,是在HSL模式上新增了Alpha透明度。 本教程操作环境:windows7系统、CSS3版、Dell…

    2026年5月10日
    000
  • css3 animation属性怎么用

    css3 animation属性是一个简写属性,通过设置六个动画属性来实现动画效果。这六个属性分别为动画名称、动画时间、速度曲线、动画延迟、播放次数及动画是否反向播放。 css3 animation属性 作用:animation 属性是一个简写属性,用于设置六个动画属性。 语法: animation…

    2026年5月10日
    000
  • 如何使用CSS3实现千变万化的文字阴影text-shadow的效果

    如何使用CSS3实现千变万化的文字阴影text-shadow的效果如何使用CSS3实现千变万化的文字阴影text-shadow的效果如何使用CSS3实现千变万化的文字阴影text-shadow的效果如何使用CSS3实现千变万化的文字阴影text-shadow的效果

    这篇文章主要介绍了css3实现千变万化的文字阴影text-shadow效果设计的相关资料,感兴趣的小伙伴们可以参考一下 本文实例为大家分享了CSS3千变万化的文本阴影text-shadow效果实例,供大家参考,具体内容如下 语法: none||none|[,]*或none||[,]* 取值简单说明:…

    2026年5月10日 用户投稿
    000
  • CSS3实现预载动画效果的几种方法

    CSS3实现预载动画效果的几种方法CSS3实现预载动画效果的几种方法CSS3实现预载动画效果的几种方法CSS3实现预载动画效果的几种方法

    本篇文章主要介绍了css3动画:5种预载动画效果实例,内容挺不错的,现在分享给大家,也给大家做个参考。 实现如图所示的动画效果: 预载动画一:双旋圈 在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码,即内圈比外圈的速率快2倍。 实现如图所示: 立即学习“前端免费学习笔记(深入)”; h…

    2026年5月10日 用户投稿
    000
  • 使用HTML5和CSS3实现生日蛋糕的制作

    这篇文章主要介绍了关于使用HTML5和CSS3实现生日蛋糕的制作,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 “祝你生日快乐,祝你生日快乐……”,过生日有生日歌,生日蛋糕也是必不可少的,这篇文章主要为大家详细介绍了程序员利用纯HTML5+CSS3制作的生日蛋糕,具有一定的参考价值,…

    2026年5月10日
    000
  • CSS3中有哪些伪类选择器, 伪类选择器nth-child() 怎么使用

    css3中新的属性给我们带来了不少的便利,比如伪类选择器 nth-child(),但是它在ie6-8和ff3.0-浏览器不支持,css3中nth-of-type(n)(比如nth-of-type(1))这个特殊的类选择符可以设置更加个性的标题和段落等,不过,目前nth-of-type(n)只支持火狐…

    用户投稿 2026年5月10日
    000
  • html5如何转圈动画_制作HTML5元素转圈动画效果【效果】

    可通过CSS3 @keyframes配合transform实现持续旋转动画,具体包括定义rotate360关键帧、应用animation属性、结合JavaScript动态控制、优化timing-function及移动端适配。 如果您希望让HTML5页面中的某个元素实现持续旋转的动画效果,则可以通过C…

    2026年5月10日
    100
  • 什么是CSS优先级

    什么是CSS优先级什么是CSS优先级什么是CSS优先级什么是CSS优先级

    所谓CSS优先级,即是指CSS样式在浏览器中被解析的先后顺序;浏览器是通过优先级来判断哪些属性值与元素最相关以决定并应用到该元素上的。优先级就是分配给指定的CSS声明的一个权重,它由匹配的选择器中的每一种选择器类型的数值决定。 本教程操作环境:windows7系统、CSS3版、Dell G3电脑。 …

    2026年5月10日 用户投稿
    000

发表回复

登录后才能评论
关注微信