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

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

2024-07-02 36
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 设计，兼容性----字体-------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兼容性
爱你三千遍斯塔克
目录
相关文章
爱你三千遍斯塔克
|
2月前
移动端的打开方式,打开F12之后，就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box； 定宽度为多少就是多少，代码库,移动端
移动端的打开方式,打开F12之后，就可以看到手机样式设计,移动端的初始化使用normalize.css代码库录到,box-sizing: border-box； 定宽度为多少就是多少，代码库,移动端
爱你三千遍斯塔克
40 0
小徐在进步
|
10天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性，通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性，并提供了实用的代码示例。此外，还简要介绍了调试工具中的一些细节，如错误属性标识和属性生效状态的控制。
小徐在进步
44 28
html的七十二变
|
8天前
|
缓存 前端开发
css内部样式和外部样式的性能比较和使用规范
CSS 的内部样式和外部样式各有优缺点，适用于不同场景。
html的七十二变
28 13
你都不懂
|
3天前
|
前端开发
css ＜样式一＞
css ＜样式一＞
你都不懂
13 1
你都不懂
|
19天前
|
设计模式 移动开发 前端开发
CSS内联样式的使用，吐血整理
CSS内联样式的使用，吐血整理
你都不懂
32 6
1288912195458132
|
24天前
|
XML 前端开发 数据格式
CSS常用样式及示例
CSS常用样式及示例
1288912195458132
15 1
游客zi3qmblbcdexu
|
1月前
|
前端开发
CSS 设置hr样式
【8月更文挑战第9天】
游客zi3qmblbcdexu
32 5
土木林森
|
21天前
|
前端开发 Java UED
JSF 面向组件开发究竟藏着何种奥秘？带你探寻可复用 UI 组件设计的神秘之路
【8月更文挑战第31天】在现代软件开发中，高效与可维护性至关重要。JavaServer Faces（JSF）框架通过其面向组件的开发模式，提供了构建复杂用户界面的强大工具，特别适用于设计可复用的 UI 组件。通过合理设计组件的功能与外观，可以显著提高开发效率并降低维护成本。本文以一个具体的 `MessageComponent` 示例展示了如何创建可复用的 JSF 组件，并介绍了如何在 JSF 页面中使用这些组件。结合其他技术如 PrimeFaces 和 Bootstrap，可以进一步丰富组件库，提升用户体验。
土木林森
36 0
土木林森
|
21天前
|
前端开发 JavaScript 开发者
【前端革新力】React与CSS-in-JS完美邂逅：从styled-components到emotion，全面解析样式管理新趋势的实战应用与优势剖析！
【8月更文挑战第31天】CSS-in-JS 作为一种新兴的样式管理方式，近年来在前端社区受到广泛关注。它将样式嵌入 JavaScript，实现了样式与逻辑的高度耦合，提升了开发效率并解决了全局样式污染等问题。本文通过具体代码示例，探讨 CSS-in-JS 在 React 开发中的应用，并分享实践心得。首先介绍了 CSS-in-JS 的基本概念，然后详细展示了如何使用 styled-components 和 emotion 这两个流行库创建样式化组件。
土木林森
29 0
白如意i
|
1月前
|
前端开发 Ubuntu Linux
CSS 系统字体堆栈参考
CSS 系统字体堆栈参考
白如意i
25 0

热门文章

最新文章

  • 1
    细节决定成败——无CSS时网页的可读性
  • 2
    CSS3自定义发光radiobox单选框
  • 3
    12款精美的免费 CSS 网页模板下载
  • 4
    CSS好看的按钮
  • 5
    【技术贴】DropDownList的css颜色样式修改
  • 6
    通用base.css —— 《编写高质量代码 web前端开发修炼之道》
  • 7
    CSS3新特性: mix-blend-mode: multiply
  • 8
    Css3 圆角和渐变色问题(IE9)
  • 9
    15.2. XHTML+DIV+CSS
  • 10
    利用 hover 伪类创建纯 CSS 收缩面板
  • 1
    css 鼠标悬浮显示放大图片 vs 鼠标点击显示放大图片
    30
  • 2
    css 平滑滚动 scroll-behavior: smooth
    32
  • 3
    css图标合并——ClipPath Sprites技术
    30
  • 4
    css的flex布局中使用margin:auto智能分配剩余空间
    35
  • 5
    vue组件封装——固定宽高比的容器（2种方法：纯CSS实现 + JS实现）
    90
  • 6
    vue实战范例——箭头步骤条/导航（含css 斜切skew的妙用）
    141
  • 7
    css特效动画——转圈的加载动画
    30
  • 8
    只会用插件可不行，这些前端动画技术同样值得收藏-CSS篇
    68
  • 9
    如何在CSS中写变量？一文带你了解前端样式利器
    38
  • 10
    前端 CSS 经典：模拟 material 文本框
    20

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • CSS基础教程
  • 前端开发基础3：CSS3常见显示属性
  • 图表样式智能美化工具
    • 下一篇
    通义千问API入门教程