css的font字体样式引入

最新推荐文章于 2024-05-20 22:08:52 发布
最新推荐文章于 2024-05-20 22:08:52 发布
阅读量895 收藏 2
点赞数
分类专栏： css 文章标签： css css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42571979/article/details/129495700
版权

1.安装Alibaba-PuHuiTi.otf字体

我这里使用的是Alibaba-PuHuiTi.otf,写下来这篇文章是因为踩到一些坑。首先点进去otf文件，让电脑安装这款字体才能看到效果:
在这里插入图片描述
安装完成

2.引入css字体样式otf文件

引入的时候这里会有一个坑，我还以为是电脑没有安装字体成功，系统没检测到
在这里插入图片描述
放在后面是没有效果，没有反应，也不会报错的，写下来是为了节约各位开发时间。

林-
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中引入指定字体@font-face兼容各浏览器的问题
11-21
网页制作中，如果想使用特定的字体可以通过 @font-face 引用，即是解决访问用户电脑本地没有安装该字体导致不能按设计样式显示的问题。 注意： 支持 @font-face 的浏览器有Internet Explorer 9、Firefox Opera、...
CSS选择器、font、文本、引入方式
m0_58035213的博客
09-11 515
css基础知识点
CSS3中引入自定义字体（font-face）
haogemr的博客
04-03 5022
首先引入某个字体，就应该有这么个字体（用户不需要有），下载字体放到项目的font文件夹下面 然后设置css <style type="text/css"> @font-face { font-family:'chunlian'; src: url(font/chunlian.ttf); } .chunlian{ font-family: 'chunlian'; ...
font-face外部字体引入
yzt02012的博客
09-18 838
@font-face {       //引入格式       //定义名字 font-family: "Raphaelicons"; src:url('fonts/raphaelicons-webfont.eot') format('eot'), /* IE9+ 才被适用.eot*/ url('fonts/raphaelicons-webfont.svg') format('s
css字体渐变和字体引入
Hello_oll的博客
07-29 140
【代码】css字体渐变和字体引入。
Vue · font引入外部字体
weixin_42091247的博客
10-20 697
方法一： 1、下载所需要的字体，.ttf格式（测试字体） 2、 src下新建css文件，文件夹中包含以下文件 font.css @font-face { font-family: 'Gen2'; src: url('./GenJyuuGothicMonospaceHeavy2.ttf') format('truetype'); font-weight: normal; font-style: normal; font-size: 18px; } 3、引入字
使用CSS3的font-face字体嵌入样式的方法讲解
12-13
CSS3 中引入了 font-face（嵌入字体类型），实验 font-face 可以把需要的字体上传到自己的服务器，再在服务器的网页中使用该字体并显示出来，无论浏览网页的用户的本地端是否有该字体。 语法： CSS Code复制内容到...
CSS font-family为英文和中文字体分别设置不同的字体
09-25
主要介绍了使用CSS font-family为英文和中文字体分别设置不同的字体，需要的朋友可以参考下
Vue2.x中利用@font-size引入字体图标报错的解决方法
12-04
利用 vue-cli 搭建的项目平台 利用stylus写的css样式 ...①没在用到的地方引入字体的样式文件 ②使用的是后缀名为 .styl 文件 ③将font文件夹移动到static文件夹中，利用绝对路径访问，此时可以使用.sty
引入第三方字体库 第三方字体库Google Fonts
LRQQHM的博客
07-21 1911
googlefonts官方网站 googlefonts中国网站本人是在微信小程序中引入 在static中建一个文件夹font-family 例如字体链接：https://fonts.font.im/css?family=Kirang+Haerang 将该链接的返回的资源的复制到css文件中 main.js引入 微信小程序不校验合法域名就能看到结果
在前端项目里引入字体
weixin_41897680的博客
12-23 2238
在前端项目里引入文字
Shopify的字体库Font引用代码、引入js、引入css
withkai44的博客
12-13 515
这样的方式引入，直接通过script传统引入可能不生效。Shopify的字体库Font引用代码。Shopify引入js文件。
如何引入外部font文字
weixin_30343157的博客
01-20 331
1、首先在电脑上找到想要引入的外部字体然后下载font文字，以.ttf结尾的 2、将以.ttf结尾的字体，放到自己项目的font文件夹下面 3、在css里面引入外部字体 @font-face{ font-family: 'Open Sans';//文字名称（文字名称，将.ttf用记事本打开就能看到，通常是第一行；） src : url('../font/OpenSans-R...
前端纯CSS导入otf字体包
zhangxxxq的博客
08-31 5117
使用font-face引入字体包1.声明font-face2.在样式中使用 1.声明font-face <style> @font-face { font-family: GraublauWeb; src: url("../../assets/otf/111.otf"); } @font-face { font-family: IndexPhone; src: url("../../assets/otf/222.otf"); } </style> 2.在样式中使用
Vue3组件库开发项目实战——02项目搭建（配置Eslint/Prettier/Sass/Tailwind CSS/VitePress/Vitest）
三月和九月的博客
05-11 965
在现代前端开发中，构建一个高效、可维护且易于协作的开发环境至关重要。特别是在开发Vue3组件库时，我们需要确保代码的质量、一致性和文档的完整性。本文将带你从0搭建vue3组件库开发环境，以下是配置代码规范、格式化、CSS样式工具、文档工具、单元测试技术选型的必要性。
Web开发——HTML&CSS
最新发布
一切皆是定数的博客
05-20 150
HTML：HyperText Markup Language，超文本标记语言超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容。标记语言：由标签构成的语言，HTML标签都是预定义好的。HTML代码直接在浏览器中运行，HTML标签由浏览器解析。CSS：Cascading Style Sheet，层叠样式表，用于控制页面的样式（表现）。以下就是html代码以及css样式搭配之后的显示效果。
vue使用Less报错semi-colon expectedcss(css-semicolonexpected)的解决方法
qq_39691676的博客
05-20 37
2、在根目录中添加stylelint.config.js文件（与package.json同级）4、最后，在vscode的setting.json文件中加入以下内容。1、将 styleint 依赖项添加到项目中。3、在vscode中安装。
css: 动态设置网格线
1111111111
05-14 336
唯一的遗憾是，宽度和高度本来想设置为数字类型，通过input-number输入，然后在css里拼上‘px’，像下面这种写法，会报错，所以只能把px单位放在输入框里。上面的html和下面的css不在同一个vue文件里，虽然变量名不同，一个是formData，一个是designData，所指向的对象是相同的。注意：style里不要写lang="scss" 不然会一直报错。另外还有一个小小的问题，页面缩放的时候，网格线会消失。把网格颜色，宽高和透明度做成可配置项。
css 引入外部字体
07-28
要在CSS中引入外部字体，您可以按照以下步骤进行操作： 1. 首先，找到您要使用的外部字体文件（通常为.ttf、.otf或.woff格式），或者您可以从Google Fonts等网站上选择所需的字体。 2. 将字体文件放置在您的项目文件夹中，例如在一个名为 "fonts" 的子文件夹中。 3. 在CSS文件中，使用@font-face规则来定义外部字体。在规则中指定字体的名称、字体文件的路径和格式。示例如下： ```css @font-face { font-family: 'YourFontName'; src: url('fonts/your-font-file.ttf') format('truetype'); } ``` 4. 在需要使用外部字体的地方，使用font-family属性来指定所定义的字体名称。示例如下： ```css body { font-family: 'YourFontName', sans-serif; } ``` 在上面的示例中，"YourFontName"是您定义的字体名称，也是您用于引用字体的名称。 5. 确保在HTML文件中引用了您的CSS文件。例如： ```html <link rel="stylesheet" href="styles.css"> ``` 6. 现在，您应该能够在页面中看到使用了外部字体的文本。 请注意，由于浏览器安全策略的限制，某些字体可能无法跨域使用。确保将字体文件放置在与CSS文件相同的域或子域下，以避免跨域问题。另外，为了确保字体在不同浏览器中的兼容性，建议提供多种字体格式（如.woff、.woff2、.ttf）并在@font-face规则中指定适当的格式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值