在CSS中引入外部字体（HarmonyOS）

最新推荐文章于 2025-03-17 00:11:21 发布

JfdCoding

最新推荐文章于 2025-03-17 00:11:21 发布

阅读量1.8k

点赞数

文章标签： css harmonyos 前端

本文链接：https://blog.csdn.net/JfdCoding/article/details/133143654

版权

harmonyos 专栏收录该内容

122 篇文章 ¥59.90 ¥99.00

订阅专栏

本文介绍了如何在CSS中引入HarmonyOS字体，包括获取字体文件、上传、创建字体样式和应用到元素上，以实现网页设计的个性化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在网页设计中，字体选择对于页面的整体风格和用户体验至关重要。除了系统默认的字体，我们还可以通过CSS引入外部字体来实现更多样化的效果。本文将详细介绍如何在CSS中引入外部字体，并以HarmonyOS字体为例进行说明。

步骤1：获取字体文件
首先，我们需要获取HarmonyOS字体的字体文件。通常，字体文件的格式可以是.ttf（TrueType字体）、.otf（OpenType字体）等。你可以从官方渠道或其他合法来源获取字体文件。

步骤2：上传字体文件
将获取到的字体文件上传至你的网站服务器上，确保文件路径正确并可供访问。

步骤3：创建字体样式
在CSS文件中，我们需要定义字体样式以及其对应的字体文件路径。可以通过@font-face规则来实现。下面是一个示例代码：

@font-face {
   
  font-family: 'HarmonyOS'

了解本专栏

订阅专栏解锁全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JfdCoding

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

订阅专栏

使用CSS引用外部TTF字体

WbhsOcaml的博客

09-26

3500

除了使用系统默认的字体，你还可以通过CSS引用外部的TrueType字体文件（TTF）来自定义页面中的字体样式。在你的项目中创建一个字体目录，并将字体文件保存在其中。例如，你可以在项目根目录下创建一个名为"fonts"的文件夹，并将字体文件命名为"myfont.ttf"并保存在该文件夹中。当浏览器加载你的网页时，它会下载并应用所引用的字体文件，从而呈现出你定义的自定义字体样式。完成字体的定义后，你可以在网页中的任何元素上使用自定义字体。最后，将你的CSS文件保存，并在HTML文件中引用它。

HarmonyOS鸿蒙开发学习：鸿蒙基础-基础环境-ArkTS-组件-样式

专注移动开发

08-05

1804

下载对应的版本API12 的编辑器 API12的模拟器(mac英特尔安装API11)解压编辑器版本将左侧内容拖入点击打开新建一个路径 HarmonyOS-SDK 将资源下载包中的sdk的内容进行解压，放入到刚刚新建的目录将设置中的安装路径改变成新建的目录，最终点击确认，sdk就安装好了打开原有项目发现一个配置文件的依赖，线上没有提供云下载地址，只能采用离线的版本。hvigor下载资源包中，还有提供一个dependencies，这就是我们需要替换的版本 internal-plugin-S

参与评论您还未登录，请先登录后发表或查看评论

网站css引入和使用外部(本地或cdn)字体

程序员

12-02

2785

【代码】css引入外部字体文件。

CSS引入方式、字体与文本

最新发布

2301_82023822的博客

03-17

867

CSS（层叠样式表）是用于描述网页外观和格式的核心技术。CSS基本结构选择器 {属性: 值;属性: 值;选择器：定位HTML元素（如p.class#id属性和值：定义样式规则（如color: red;优先使用外部样式表样式与结构分离，便于维护和复用。利用浏览器缓存提升性能。避免滥用内联样式内联样式优先级高，难以覆盖，且不利于维护。慎用 @import推荐使用<link>标签替代@import，避免阻塞渲染。模块化 CSS将样式按功能或组件拆分为多个文件，通过<link>引入。u。

css引入字体

VibMike的博客

06-09

9075

1、如果是下载的字体文件，直接能使用的就不需要转换，如果是TTF格式则需要转换成eot、svg、wpff，这里提供一个网站Font Squirrel | Create Your Own @font-face Kits，进行文字转换2、这里我用系统的文字来演示，打开C盘，找到windows下的Fonts文件夹，这是系统的字体文件，随便找一个你需要的，拖出来3、拿第一个FB来示范，点进去会有两个，一个细体一个粗体，用细体进行演示4、将文字拖到桌面，进入网站，点击Upload Fonts上传你的文件，BASIC为

css引入字体包外部字体的方法

ys_healone的博客

09-13

2543

2、css顶部 @font-face声明字体。3、样式中font-family使用。1、字体包用本地文件或线上连接。

css引入外部字体

qq_45350116的博客

04-18

3208

css引入外部字体

css如何引入外部字体？

weixin_30731305的博客

05-25

552

第一步，在CSS中引入字体并给名字取一个合适的名字，如下 1 2 3 4 5 6 7 @font-face { /* font-properties */ font-family: pictos; src:url('pictos/pictos-web.woff'), url('pictos/pic...

14-CSS引入外部字体及图标字体

CapejasmineY的博客

08-06

916

CSS引入外部字体及阿里图标字体库

HarmonyOS系统应用开发基础入门

Crowd_chips的博客

07-08

1347

ArkUI基础入门知识点

两个案例五分钟轻松入门Harmony（鸿蒙）开发

Java框架、并发编程、分布式、微服务、Redis、HarmonyOS、中间件等技术

07-26

6410

一、任务说明构建一个简单的具有页面跳转功能的应用，以此来熟悉HarmonyOS应用开发流程！HarmonyOS提供了两种FA（Feature Ability）的UI开发框架：Java UI框架和JS UI框架。本文会通过Java和JS两种方式的Demo来入门HarmonyOS，此外也会介绍HarmonyOS的DevEco Studio编码工具的相关使用，工程的配置文件介绍，资源文件介绍等内容，文章大部分理论部分来自官网。 https://developer.harmonyos.com/cn/home

HarmonyOS通讯录测试策略：确保应用稳定高效的实用技巧

HarmonyOS通讯录应用作为智能操作系统中的重要组成部分，其设计、开发与测试是保证用户良好体验的关键。本文首先概述了HarmonyOS通讯录应用的基本功能与特点，随后深入探讨了其理论基础，涵盖用户界面设计、数据存储...

css外部字体引用

12-30

270

* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera * .EOT，适用于Internet Explorer 4.0+ * .SVG，适用于Chrome、IPhone 比如:@font-face { font-family: 'HansHandItalic'; src: url('fonts/hanshand-webfont.eot'); sr...

CSS引入外部字体

congxue666的博客

02-19

472

CSS3引入外部字体 1.首先需要把下载的字体，放到项目下。 2.css代码如下： @font-face { font-family: 苹方黑体-准-简; src: url(../fonts/苹方黑体-准-简.ttf); } *{ font-family: 苹方黑体-准-简; }

css导入外部字体

oolppp的博客

02-23

283

应用web字体：用户电脑没有安装该字体，浏览器强制让用户下载该字体。应用了字体样式，但用户电脑却没有安装该字体时，样式没有生效。用户在下载字体时需要一段时间，可能需要一段时间才能看到效果。

如何用CSS调用外部字体

weixin_34167819的博客

09-11

206

语法：@font-face{font-family:name;src:url(url);sRules}取值：name：字体名称。任何可能的 font-family 属性的值url(url)：使用绝对或相对 url 地址指定OpenType字体文件sRules：样式表定义转载于:https://www.cnblogs.com/zyy711865/archive/2012/09/11/2680548...

CSS 引入字体