广告
返回顶部
首页 > 资讯 > 精选 >css引入字体文件的方法
  • 317
分享到

css引入字体文件的方法

2023-06-06 13:06:21 317人浏览 泡泡鱼
摘要

这篇文章主要介绍了CSS引入字体文件的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在css中,可以使用“@font-face”规则来引入字体文件,语法格式“@font-

这篇文章主要介绍了CSS引入字体文件的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

在css中,可以使用“@font-face”规则来引入字体文件,语法格式“@font-face{font-family:"自定义字体名称";src:"需要引入的字体文件的URL路径";}”。

有些字体本身浏览器不携带,需下载字体包引入,自定义字体了。在css中,可以使用@font-face规则来引入外部字体。

如需为 html 元素使用字体,请通过 font-family 属性来引用字体的名称 (myFirstFont):

添加自定义字体:

①:首先需要下载所需字体

②:把下载字体文件放入 font文件夹里(建议font文件夹与 css 和 image文件夹平级))

css引入字体文件的方法

【 】

③:引入字体(可直接在html文件里用@font-face引入字体,如下图,分别是字体名字和路径)

css引入字体文件的方法

这样就可以直接给需要设置此字体的文字设置该字体了,如下图

css引入字体文件的方法

感谢你能够认真阅读完这篇文章,希望小编分享的“css引入字体文件的方法”这篇文章对大家有帮助,同时也希望大家多多支持编程网,关注编程网精选频道,更多相关知识等着你来学习!

--结束END--

本文标题: css引入字体文件的方法

本文链接: https://www.lsjlt.com/news/247188.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • css引入字体文件的方法
    这篇文章主要介绍了css引入字体文件的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。在css中,可以使用“@font-face”规则来引入字体文件,语法格式“@font-...
    99+
    2023-06-06
  • html引入css文件的方法
    这篇文章给大家分享的是有关html引入css文件的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。引入方法:1、使用link标签引入,语法“<link rel="stylesheet"...
    99+
    2023-06-15
  • CSS怎么引入艺术体文字
    这篇文章主要介绍了CSS怎么引入艺术体文字,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。 CSS引入艺术体文字// 艺术字 @f...
    99+
    2022-10-19
  • vue如何引入ttf字体文件
    在vue中引入ttf字体文件的方法:1.新建vue.js项目;2.创建font.css文件,并添加配置;3.配置webpack.base.conf.js文件;4.使用@import方法引入ttf字体文件;具体步骤如下:首先,在vue-cli...
    99+
    2022-10-12
  • python引入其他文件夹下的py文件具体方法
    红色方框要引入箭头里面的 import sys sys.path.append('../../config/') from database import * print(MYSQL_CONFIG) 内容扩展...
    99+
    2022-06-02
    python 引入py文件
  • html引用css文件的方法
    本篇内容介绍了“html引用css文件的方法”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! ...
    99+
    2022-10-19
  • 引入CSS文件的方式有哪些
    这篇文章给大家介绍引入CSS文件的方式有哪些,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。css的三种引入方式1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,...
    99+
    2023-06-08
  • css字体的设置方法
    这篇文章给大家分享的是有关css字体的设置方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。css字体的设置方法:【font-family】规定元素的字体系列,【font-family】可以把多个字体名称作为一个...
    99+
    2023-06-14
  • js中引入css的方法
    这篇文章主要介绍了js中引入css的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。js中引入css的方法:1、使用“document.write”方式输出引入css的li...
    99+
    2023-06-14
  • CSS文件中有多少种引入方式
    小编给大家分享一下CSS文件中有多少种引入方式,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!CSS引入方式-行内式通过 style这个标签属性,将css键值对直接写入标签内<p style="wi...
    99+
    2023-06-08
  • html引用css文件的方法有哪些
    这篇文章主要介绍“html引用css文件的方法有哪些”,在日常操作中,相信很多人在html引用css文件的方法有哪些问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”html引用...
    99+
    2022-10-19
  • CSS设置字体粗细的方法
    小编给大家分享一下CSS设置字体粗细的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在CSS中,可以通过font-weight属性来设置字体的粗细值;当该属性...
    99+
    2023-06-14
  • css设置字体样式的方法
    这篇文章主要介绍了css设置字体样式的方法,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计...
    99+
    2023-06-14
  • css字体乱码的解决方法
    小编给大家分享一下css字体乱码的解决方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!什么是csscss是一种用来表现HTML或XML等文件样式的计算机语言,主...
    99+
    2023-06-14
  • css设置字体位置的方法
    这篇“css设置字体位置的方法”除了程序员外大部分人都不太理解,今天小编为了让大家更加理解“css设置字体位置的方法”,给大家总结了以下内容,具有一定借鉴价值,内容详细步骤清晰,细节处理妥当,希望大家通过这篇文章有所收获,下面让我们一起来看...
    99+
    2023-06-06
  • Android Studio 引入 aidl 文件的方法汇总
    AndroidStudio 引入 aidl 文件,一般来说,有两种方法.第一种方法直接在 src/main 目录下新建 aidl 文件夹,并将我们的 aidl 文件放到该目录下。因为 AndroidStudio 默认的 aidl 文件默认配...
    99+
    2023-05-30
    android studio aidl
  • CSS隐藏文字的方法
    这篇文章主要介绍CSS隐藏文字的方法,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!隐藏文字的方法:1、使用display属性,语法“display:none;”;2、使用visibility属性,语法“visibil...
    99+
    2023-06-14
  • css中改变字体大小的方法
    本文将为大家详细介绍“css中改变字体大小的方法”,内容步骤清晰详细,细节处理妥当,而小编每天都会更新不同的知识点,希望这篇“css中改变字体大小的方法”能够给你意想不到的收获,请大家跟着小编的思路慢慢深入,具体内容如下,一起去收获新知识吧...
    99+
    2023-06-06
  • css中设置字体颜色的方法
    这篇文章给大家分享的是有关css中设置字体颜色的方法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在CSS中,可以通color属性来设置字体颜色,只需要给包含字体文字的元素设置“color:颜色值;”样式即可。c...
    99+
    2023-06-14
  • CSS中文字体对应的英文写法介绍
    这篇文章主要介绍“CSS中文字体对应的英文写法介绍”,在日常操作中,相信很多人在CSS中文字体对应的英文写法介绍问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS中文字体对...
    99+
    2022-10-19
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作