html/css导入自己的字体样式

最新推荐文章于 2024-04-15 10:06:08 发布
最新推荐文章于 2024-04-15 10:06:08 发布
阅读量1.4w 收藏 12
点赞数 8
分类专栏： html 文章标签： 字体 html css 自定义
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_ZhouR/article/details/88765258
版权

步骤一：

先将要添加的字体放入工程内，如：HYShangWeiShouShuW.ttf

步骤二：

在css文件中，声明字体样式，命名为 shangwei

@font-face {
    font-family:shangwei;
    src:url("font/HYShangWeiShouShuW.ttf")；
}

步骤三：

在想使用字体的class中的font-family后面的字体名中，写shangwei，就可以将自己的字体使用到目标字体中了。

 

如图：

Mr_ZhouR
关注
  • 8
    点赞
  • 踩
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
如何在html中使用自定义字体
08-20
如何在html中使用自定义字体
【HTML&CSS】补充：导入字体库定义字体图标效果的方法
2203_75920270的博客
01-26 695
单击所需图标即可下载，并且在下载之前可以配置图标的颜色。将下载的图标存储于icons文件夹中，并且将该文件夹复制到新建的项目文件夹中。下载后的图标如图所示。Font- 例如： font-family、font-size、color、font-weight、font-style。当我们写一些项目时，通常会涉及到各种各样的图标，推荐一个免费图标下载网站——阿里巴巴矢量图标库，该网站首页如下图(以上是今天分享的内容，小编决定保持两日一更，以此来监督自己的学习，也欢迎大家来观看笔记，指出不足。
html如何设置全局字体
weixin_35749440的博客
01-04 1813
你可以在 HTML 的 head 标签中使用 style 标签来设置全局字体。例如： <head> <style> body { font-family: "Arial", sans-serif; } </style> </head> 上面的代码将使用 Arial 字体作为所有页面元素的字体。如果浏览器不支持 A...
css引入字体
VibMike的博客
06-09 8504
1、如果是下载的字体文件，直接能使用的就不需要转换，如果是TTF格式则需要转换成eot、svg、wpff，这里提供一个网站Font Squirrel | Create Your Own @font-face Kits，进行文字转换2、这里我用系统的文字来演示，打开C盘，找到windows下的Fonts文件夹，这是系统的字体文件，随便找一个你需要的，拖出来3、拿第一个FB来示范，点进去会有两个，一个细体一个粗体，用细体进行演示4、将文字拖到桌面，进入网站，点击Upload Fonts上传你的文件，BASIC为
html如何添加字体
qq_43077362的博客
11-09 5284
1.添加普通字体：比如：font-family:,; 一般系统支持的网页常见中文字体有：宋体、雅黑、黑体。 body{font-size:14px;color:#333;background:#fff;font-family:"Times NewRoman","MicrosoftYaHei","simsun","HelveticaNeue",Arial,Helvetica,Georgi...
html中引入字体包
weixin_42400404的博客
05-10 1万+
1：下载字体包 之前在http://www.downyi.com/downinfo/181562.html 网站中下载过字体包。有的情况下会有附带插件。 2：字体包放在项目中 字体包存在项目文件中 3：新建font.css文件，在里面写入以下代码 @font-face { font-family: "HYLeMiaoTi"; //自定义字体名称 src:url("HYLeMiaoTiJ.ttf"); //字体包路径 font-wei.
CSS基础知识
但行好事 无问西东
07-18 145
CSS概述： CSS(Cascading Style Sheet) 层叠样式表: 因为单纯用HTML写出来的界面比较丑，所以就有了CSS来美化它；使用CSS来美化主要使用的是style标签，基本格式如下： 选择器{ 属性 属性 ... } 代码示例： <!DOCTYPE html> <html lang="en"> <head> ...
html有字体文件怎么导入,css如何导入字体？
weixin_34581259的博客
06-30 1312
在CSS中可以使用font-face规则来导入外部字体，font-face属性可实现任何外部特殊字体的调用，例如：.ttf字体。在font-face规则中，必须首先定义字体的名称(比如 myFirstFont)，然后指向该字体文件。如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont).CSS3 @font-face 规则在 CSS3 之前...
html网页什么样的字体最好看，css设置各种中文字体样式代码
热门推荐
梁山伯_的博客
08-13 14万+
css代码如下: { font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } 加上中文名“微软雅黑”是为了兼容opera 在css中使用英文表示法，以下附常见中文字体的英文名： 网页字体样式华文黑体：STHeiti 网页字体样式华文楷体：STKaiti 网页字体样式华文宋体：ST
classlesscss：CSS样式很少，但基本HTML5标签样式很好
02-09
Classless.css Classless.css是一个小CSS文件，它为基本HTML5标签定义了一些样式，但定义了很好的样式，还为网格和间距定义了一些类。 而已。 没什么。 演示：在 产品特点 小。 仅400行纯CSS3用于主题，网格，导航栏，卡片等等。 单个文件。 一切都在一个文件中，没有依赖性¹，没有JavaScript，也没有异常。 模块化。 不需要所有功能吗？²CSS文件分为功能组。 只需删除您不需要的内容。 React灵敏。 我们对表和代码使用媒体查询，REM单位和智能溢出。 兼容Bootstrap。 需要类的特殊功能使用与Bootstrap相同的名称。 ¹：我们导入了“ Open Sans”字体，但是如果失败，我们将退回到Helvetica。 ²：我们还提供仅基本样式的预制小版本（90行）。 入门 为了进行测试，您只需将以下行插入HTML文件即可。 为了进行
css-bonus-challenges:一组用于实践HTML和CSS样式的示例UI
05-19
CSS奖金挑战 此仓库包含各种示例UI，可用于练习HTML和CSS样式。 用户界面按复杂程度大致分组。 不应使用CSS框架。 使用CSS Grid，Flexbox和SASS会有所帮助，但不是必需的。 要确定颜色，如果使用Mac，请使用数字色度计确定正确的颜色。 同样，不应使用CSS框架，但构建自定义网格系统可能会有所帮助。 每个示例UI都包含所需的图像，正式规范列表，在某些情况下还包含GIF来说明功能。 可能需要导入其他字体和图标。
google-font-import:将Chrome浏览器应用程序导入Google字体到本地
05-13
谷歌字体导入 下载Google字体并使用更新的路径写入html / css文件 安装 $ npm install --save google-font-import 用法 安慰 gf-import ./fixture/roboto.html --html=./.tmp --font=./.tmp/fonts --style=./.tmp 选项 --html：用于保存具有新样式样式的文件的html路径 --fonts：下载字体的目标路径 --style：样式表路径，用于保存具有新字体路径的文件 原料药 var imports = require ( "google-font-import" ) ; var opts = { src : './fixture/roboto.html' , htmlpath : './.tmp' , fontpath : './.tmp/fonts'
精通CSS+DIV网页样式与布局全集
11-09
1.2.3　链接式　1.2.4　导入样式　1.2.5　各种方式的优先级问题　1.3　体验CSS　1.3.1　从零开始　1.3.2　加入CSS控制　1.3.3　控制图片　1.3.4　CSS的注释　第2章　CSS的基本语法　2.1　CSS选择器　2.1.1　标记选择...
精通CSS+DIV网页样式与布局视频教材
12-25
精通CSS+DIV网页样式与布局 视频教材主要内容 迅雷下载地址： 目录 第1部分　CSS基础知识篇 第1章　CSS的初步体验 1.1　CSS的概念 1.1.1　标记的概念 1.1.2　传统HTML的缺点 1.1.3　CSS的引入 1.1.4...
用html实现文字雨
liulang68的博客
04-12 829
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>文字雨</title> <style> html, body { height: 100%;
用html写文本变形动画
liulang68的博客
04-15 462
【代码】用html写文本变形动画。
【HTML】制作一个简单的实时字体时钟
qq_70814008的博客
04-11 1519
整体上，这个网页应用程序通过HTML提供了页面结构，CSS赋予了页面美观的样式，而JavaScript则让页面具有动态更新和用户交互的能力。三者共同协作，实现了一个既美观又实用的动态时钟和日期时间转换工具。
html公众号页面实现点击按钮跳转到导航
最新发布
nzz_1214
04-15 351
接口后台为php写的，html页面按照上面的写就可以实现，确实苹果手机和安卓手机的严谨性是不一样的，哈哈，希望会对您有帮助。
html中怎么导入css
06-08
在 HTML 中，可以通过 `link` 元素将 CSS 文件导入到 HTML 中。 `link` 元素应该位于 HTML 文档的 `<head>` 标签中，如下所示： ```html <!DOCTYPE html> <html> <head> <title>My Page</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <!-- 页面内容 --> </body> </html> ``` 在上面的示例中，我们使用 `link` 元素将名为 `style.css` 的 CSS 文件导入到 HTML 中。 `href` 属性指定了 CSS 文件的路径，可以是相对路径或绝对路径。`type` 属性指定了导入文件的 MIME 类型，对于 CSS 文件，其值应该为 `text/css`。 在 CSS 文件中，我们可以定义 HTML 元素的样式，例如字体、颜色、背景等等。通过这些样式，可以为 HTML 页面添加更加美观和易读的界面。 注意：在导入 CSS 文件时，应该确保文件路径正确，并且文件名、大小写和扩展名都正确，否则浏览器将无法正确加载 CSS 文件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值