热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

CSS3之文字与字体相关样式

text-shadow给文字添加阴影用法:text-shadow:lengthlengthlengthcolor前面三个length分别指阴影离开文字的横向距离、
  1. text-shadow 给文字添加阴影
    用法:text-shadow: length length length color
    前面三个length分别指阴影离开文字的横向距离、阴影离开文字的纵向距离和阴影的模糊半径,color指阴影的颜色(横向距离和纵向距离可以为负数)。
    *使用text-shadow还可以给文字指定多个阴影。

  2. 让文本自动换行
    浏览器本身都自带着让文本自动换行的功能。在浏览器中显示文本的时候,会让文本在浏览器或div元素的右端自动实现换行。对于西方文字来说,浏览器会在半角空格或连字符的地方自动换行,而不会在单词的当中突然换行。对于中文来说,可以在任何一个中文字后面进行换行,当中文中含有标点符号的时候,浏览器总是不可能让标点符号位于一行文字的行首,通常将标点符号以及它前面的一个文字作为一个整体来统一换行。
    word-break可以指定自动换行的处理方法。可以让浏览器实现任意位置的换行。
    word-break属性可以使用的值:

    1. normal: 使用浏览器默认换行规则
    2. keep-all: 只能在半角空格和连字符处换行
    3. break-all: 允许在单词内换行
  3. 让长单词与URL地址自动换行
    因为在URL地址中没有半角空格,所以当URL地址中没有连字符的时候,浏览器在显示时是将其视为一个比较长的单词来进行显示的。
    在CSS3中,使用word-wrap属性来实现长单词与URL的自动换行。
    word-wrap: break-word;

  4. 使用服务器端字体
    在CSS3之前,页面文字所使用的字体必须在客户端中被安装才能正常显示。在CSS3中,使用Web Fonts可以在网页中显示安装在服务器端的字体。
    使用方法:在font-family属性值中使用“WebFont”来声明使用服务器端的字体。
   @font-face{
font-family: WebFont;
src: url('font/Fontin_Sans_R_45b.otf') format("opentype")
;
font-weight: normal;
}
  • src属性指定服务器端字体的字体文件所在的路径;
  • format属性指定字体文件的格式。
    到目前为止,可以使用的文件格式为opentypetruetype。opentype格式的文件扩展名为”.otf”,truetype格式的文件扩展名为”.ttf”。
    在针对元素使用这个服务器端字体的时候,还需要在元素样式中将font-family属性值指定为WebFont。
    例如:
  span{
font-family: WebFont;
}
  • 另外,在定义字体的时候,可以将字体定义为斜体字或者粗体字。在使用服务端字体的时候,需要根据是斜体还是粗体使用不同的字体文件。
    以粗体为例:
    @font-face{
font-family: WebFont;
src: url('font/Fontin_Sans_B_45b.otf') format("opentype")
;
font-weight: normal;
}

span{
font-family: WebFont;
font-style: bold;
}

推荐阅读
  • MVC框架下使用DataGrid实现时间筛选与枚举填充
    本文介绍如何在ASP.NET MVC项目中利用DataGrid组件增强搜索功能,具体包括使用jQuery UI的DatePicker插件添加时间筛选条件,并通过枚举数据填充下拉列表。 ... [详细]
  • 作为一名CSS初学者,我在博客园中尝试通过CSS美化页面,特别是为超链接添加图标,以提升阅读体验。本文将分享如何使用CSS和字体图标库来实现这一功能。 ... [详细]
  • Web网络基础
    目录儿1使用HTTP协议访问Web2HTTP的诞生2.1因特网的起源2.2互联网、因特网与万维网2.3万维网与HTTP3网络基础TCPIP3.1TCPIP协议族3.2TCPIP的分 ... [详细]
  • VS Code 中 .vscode 文件夹配置详解
    本文介绍了 VS Code 中 .vscode 文件夹下的配置文件及其作用,包括常用的预定义变量和三个关键配置文件:launch.json、tasks.json 和 c_cpp_properties.json。 ... [详细]
  • 本文详细介绍如何在Spring Boot项目中集成和使用JPA,涵盖JPA的基本概念、Spring Data JPA的功能以及具体的操作步骤,帮助开发者快速掌握这一强大的持久化技术。 ... [详细]
  • J2EE平台集成了多种服务、API和协议,旨在支持基于Web的多层应用开发。本文将详细介绍J2EE平台中的13项关键技术规范,涵盖从数据库连接到事务处理等多个方面。 ... [详细]
  • 设计模式系列-原型模式
    一、上篇回顾上篇创建者模式中,我们主要讲述了创建者的几类实现方案,和创建者模式的应用的场景和特点,创建者模式适合创建复杂的对象,并且这些对象的每个组成部分的详细创建步骤可以是动态的变化的,但 ... [详细]
  • 本文深入探讨了分布式文件系统的核心概念及其在现代数据存储解决方案中的应用,特别是针对大规模数据处理的需求。文章不仅介绍了多种流行的分布式文件系统和NoSQL数据库,还提供了选择合适系统的指导原则。 ... [详细]
  • 本文档提供了详细的MySQL安装步骤,包括解压安装文件、选择安装类型、配置MySQL服务以及设置管理员密码等关键环节,帮助用户顺利完成MySQL的安装。 ... [详细]
  • 深入探讨Web服务器与动态语言的交互机制:CGI、FastCGI与PHP-FPM
    本文详细解析了Web服务器(如Apache、Nginx等)与动态语言(如PHP)之间通过CGI、FastCGI及PHP-FPM进行交互的具体过程,旨在帮助开发者更好地理解这些技术背后的原理。 ... [详细]
  • Golang与微服务架构:构建高效微服务
    本文探讨了Golang在微服务架构中的应用,包括Golang的基本概念、微服务开发的优势、常用开发工具以及具体实践案例。 ... [详细]
  • 本文介绍了多种Eclipse插件,包括XML Schema Infoset Model (XSD)、Graphical Editing Framework (GEF)、Eclipse Modeling Framework (EMF)等,涵盖了从Web开发到图形界面编辑的多个方面。 ... [详细]
  • CSS:body{font-size:62.5%;}为什么???在网页设计中我们经常看见body{font-size:62.5%;}这样的设置,为什么偏偏是62.5%呢?这主要是为了方便em与p ... [详细]
  • 可能我们在看一些网页的源码时会发现自己从来没见过的属性或用法今天我就来总结一下CSS3的冷知识样式计算在CSS中也可以进行简单的计算通过calc函数可以实现这样还可以使我们的 ... [详细]
  • 前端每日实战 2018年10月至2019年6月项目汇总(共 20 个项目)
    过往项目2018年9月份项目汇总(共26个项目)2018年8月份项目汇总(共29个项目)2018年7月份项目汇总(共29个项目)2018年6月份项目汇总(共27个项目)2018年5 ... [详细]
author-avatar
ccM保佑加琳诺爱儿1984f
这个家伙很懒,什么也没留下!
Tags | 热门标签
RankList | 热门文章
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有