AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

设计，兼容性----字体-------Css样式的字体，字体样式导入

2024-07-02 304
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 设计，兼容性----字体-------Css样式的字体，字体样式导入

本文介绍了如何在网页设计中使用font-family属性定义字体，包括使用宋体等汉字字体，以及如何从阿里iconfont字库和GoogleFonts获取免费且高质量的字体资源，以提升网页设计的高级感。

摘要由CSDN通过智能技术生成

1、使用font-family属性定义文本的字体系列，可以使用汉字，如黑体，宋体

2、宋体

3、

4、开发过程中，我们经常把字体定义到body当中

5、如何引入新字体，以及有那些免费的字体，有那些字体，这里参考算了大佬的文章

摹客

 

原文链接在这：感兴趣的伙伴可以自行查阅“高级感”的设计，从这20款精选Google网页字体开始【免费】_chrome字体 好看的-CSDN博客

5.1 第一款字体：阿里iconfont字库

iconfont-阿里巴巴矢量图标库

5.2 第二可以到开源免费在线字体库 Google Fonts 进行寻找，里面有大量的开源字体，真心好看，一款好看适合页面的字体，真的能给网页带来不少的提高

Google Fonts | 谷歌字体中文版 | GoogleFonts


文章标签：
前端开发
Web App开发
关键词：
CSS样式
CSS字体
CSS兼容性
兼容性CSS
CSS导入
爱你三千遍斯塔克
目录
相关文章
html的七十二变
|
前端开发
如何设置 CSS 盒子模型的边框样式？
CSS盒子模型的边框样式可以通过`border`属性设置，包括边框宽度、样式和颜色。例如：`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边，如`border-top`、`border-right`等。
html的七十二变
725 2
凉凉心.
|
6月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（二）：CSS伪类：UI伪类、结构化伪类；通过伪类获得子元素的第n个元素；创建一个伪元素展示在页面中；获得最后一个元素；处理聚焦元素的样式
伪类：伪类这个叫法源自于它们跟类相似，但实际上并没有类会附加到标记中的标签上。 伪类分为两种(以及新增的伪类选择器)： UI伪类：会在HTML元素处于某种状态时(例如：鼠标指针位于连接上)，为该元素应用CSS样式。 :hover 结构化伪类：会在标记中存在某种结构上的关系时 例如： 某元素是一组元素中的第一个或最后一个，为该元素应用CSS样式。 :not和:target(CSS3新增的两个特殊的伪类选择器)
凉凉心.
605 2
凉凉心.
|
6月前
|
前端开发 算法 Java
【CSS】前端三大件之一，如何学好？从基本用法开始吧！（三）：元素继承关系、层叠样式规则、字体属性、文本属性；针对字体和文本作样式修改
继承 我们的CSS中很多的属性也是可以继承的，其中相当一部分是跟文字的相关的，比如说颜色、字体、字号。 当然还有一部分是不能继承的。 例如边框、内外边距。 层叠 层叠是CSS的核心机制。 层叠的工作机制： 当元素的同一个样式属性有多种样式值的时候，CSS就是靠层叠机制来决定最终应用哪种样式。 层叠规则： 层叠规则一：找到应用给每个元素和属性的声明。 说明：浏览器在加载每个页面时，都会据此查找到每条CSS规则， 并标识出所有受到影响的HTML元素。
凉凉心.
209 0
那年春天
|
前端开发
用 CSS 实现兼容性渐变背景效果
【10月更文挑战第17天】
那年春天
720 151
游客tsrksm3mlhq4y
|
12月前
|
前端开发
css改变鼠标样式
CSS鼠标样式
游客tsrksm3mlhq4y
375 0
光明顶阳顶天
|
前端开发 搜索推荐 UED
实现 CSS 动画效果的兼容性
【10月更文挑战第16天】实现 CSS 动画效果的兼容性需要对不同浏览器的特性有深入的了解，并采取适当的策略和方法。通过不断的实践和优化，你可以在各种浏览器上创造出流畅、美观且兼容的动画效果，为用户带来更好的体验。在实际开发中，要密切关注浏览器的发展动态，及时掌握最新的兼容性技巧和解决方案，以确保你的动画设计能够在广泛的用户群体中得到良好的呈现。
光明顶阳顶天
427 58
游客dng4gjyb342he
|
JavaScript 前端开发
jQuery和CSS3斑马线样式range滑块特效
jQuery和CSS3斑马线样式range滑块特效
游客dng4gjyb342he
186 1
东方睿赢
|
编解码 前端开发 UED
探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用
本文深入探讨了CSS媒体查询在移动端开发中的应用，介绍了媒体查询的基本概念、常见条件及其在响应式布局、导航菜单、图片优化和字体调整等方面的具体应用。通过实际案例分析和注意事项的讨论，旨在帮助开发者更好地理解和运用媒体查询，提升移动端用户体验。
东方睿赢
336 4
大树营养快线
|
前端开发 JavaScript UED
如何在内联样式中设置 CSS 变量？
【10月更文挑战第28天】
大树营养快线
477 6
邹荣乐
|
前端开发 JavaScript
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧：利用scoped与deep实现前端组件样式隔离与穿透
邹荣乐
1799 1