rails 添加自定义font字体

原创 已于 2023-04-12 18:06:50 修改 · 189 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #css

于 2023-04-12 18:04:03 首次发布
文章详细介绍了如何下载WOFF字体文件，然后在SCSS中通过@font-face规则引入，设置字体权重和样式。接着在主SCSS文件导入该规则，并创建样式类在其他页面中使用该自定义字体。

1. 下载字体文件(.woff)

        

2. 在scss文件中引入字体

assets/stylesheets/application/font_oswald.scss

@font-face {

    font-family: 'Oswald';

    src: asset_url('Oswald-Bold.ttf') format('ttf'),

        asset_url('Oswald-Bold.woff') format('woff');
    
    font-weight: 700;

    font-style: none;
    
    font-display: swap;

}

3. 在index.scss导入此文件

assets/stylesheets/application/index.scss

@import "./font_oswald.scss";

4. 在其他scss页面添加使用此字体的样式class 

assets/stylesheets/application/other.scss

.font-oswald {
  font-family: 'Oswald';
}

5. 具体页面使用

page.html.erb

<h1 class="font-oswald">title</h1>

yinmanman_dev
关注
CSS 自定义字体
weixin_44481476的博客
09-24 315
CSS 自定义字体 很多时候UI设计图的字体，普通font-family无法实现 我们可以使用CSS3的属性@font-face下载字体至本地（让后端保存至服务器） 后端会提供链接，我们如下方法使用即可： CSS @font-face { //自定义字体的名称 font-family: 'Oswald-Bold'; // 后端提供的字体url src: url("https://markyo.oss-cn-shanghai.aliyuncs.com/markyo/Oswald-Bold.
css写文字效果,css
weixin_42118160的博客
08-03 245
下载代码htmlcssjs分享到微信朋友圈Xhtml文字效果使用纯CSS酷CSS文字效果的集合！Hello World!HELLO WORLD!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!cssbody ...
第三章 弹性布局与响应式图片 flex简单案例
nullccc的博客
07-13 532
这个布局宽度为960像素，但页头和页脚都是与屏幕一样宽的。左侧边栏宽度是200像素。按照左边左边宽度100像素，右边100像素，中间便是660像素。使用960/200 = 0.208333333 得出右边百分比，其他宽度以此类推。以百分比为宽度设置css即可。现有布局缺点：行内块与空白会渲染空白、复杂的浮动、表格与表元(display:table 布局，我也不懂)。效果：代码： display: flex：这是Flexbox的根本所在。这里就是把当前元素设置为一个Flexbox（而 不是blo
在Rails资产管道中使用字体
p15097962069的博客
06-14 222
I have some fonts being configured in my Scss file like so: 我在我的Scss文件中配置了一些字体，如下所示： @font-face {
Font Awesome图标字体库
齐枫的博客
07-20 1649
下载地址  http://fontawesome.dashgame.com/assets/font-awesome-4.7.0.zip 官网   http://fontawesome.dashgame.com/ Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。 最简单的方式：Boots
Turbo Rails 指导
weixin_55166254的博客
06-06 1156
翻译：https://www.hotrails.dev/
推荐项目：Font Assets —— 解决Rails字体资产的跨域之忧
gitblog_00005的博客
06-16 320
推荐项目：Font Assets —— 解决Rails字体资产的跨域之忧 在前端开发中，自定义字体已成为提升网页美观度不可或缺的一部分。然而，在Rails框架下处理字体文件的跨域访问一直是一个棘手的问题。针对这一痛点，我们发现了名为Font Assets的宝石，它为Ruby on Rails的应用提供了简洁而高效的解决方案。本文将从四个方面深度剖析这个宝藏项目，让你不再被字体资产的跨域问题所困扰。...
Font-Awesome-Rails 开源项目教程
gitblog_00415的博客
08-22 280
`font-awesome-rails` 是一个将 Font Awesome 集成到 Rails 应用中的 gem。以下是其基本的目录结构： ``` font-awesome-rails/ ├── app │ └── assets │ ├── fonts │ │ ├── fontawesome-webfont.eot │ │ ├── fontawe...
Font Awesome使用方法
Quincylk的专栏
12-06 3581
原文：https://www.cnblogs.com/zhaowy/p/8400244.html Font Awesome（中文站点）是一套为Bootstrap而创造的图标字体库及CSS框架，在业界享有盛誉。 FA包含了常规web开发所需要用到的几乎所有图标，并且免费授权使用，只需要下载即可。 所有的图标列表查看 加入文件 1.最简单的方式：CDN （由BootCDN提供） 一句话将Fo...
font-mfizz-rails：Rails资产管道集成技术图标字体
4. 安装Font Mfizz-Rails的方法：有两种方式可以安装Font Mfizz-Rails，一种是通过Rails应用的Gemfile添加gem依赖，另一种是直接使用gem命令行工具进行安装。具体步骤如下： - 通过Gemfile安装：在应用的Gemfile中...
自定义Rails渲染器：从基础到高级应用
### 自定义 Rails 渲染器：从基础到高级应用 #### 1. 测试与渲染器初探 在开始编写自定义渲染器之前，我们先来看看测试输出： ```plaintext Run options: --seed 20094 # Running tests: . Finished tests in 0....
abracadabra：基于Rails的非侵入式文本编辑gem
同样地，若未使用Font-Awesome，也可以通过自定义选项更改编辑图标（如铅笔图标）所对应的CSS类，从而使用SVG图标、自定义字体或其他替代方案。这种高度可配置性使得abracadabra具备良好的适应能力和扩展潜力，能够...
26、Rails 视图助手全解析
qsc90123456的博客
11-06 4
本文深入解析了 Rails 框架中的各类视图助手，涵盖自定义验证错误显示、资源链接生成（如 JavaScript、CSS、图像等）、Atom 提要创建、视图片段缓存及内容捕获等功能。同时探讨了 Asset Pipeline、资产主机优化、通配符负载均衡、缓存策略与自定义助手扩展方法，并结合使用场景与最佳实践，帮助开发者提升开发效率与页面性能。最后通过流程图直观展示视图助手的使用逻辑，为 Rails 开发者提供全面的视图层解决方案参考。
Elixir与Phoenix框架下的Font Awesome图标助手工具
此外，font_awesomex可能还会支持一些高级功能，例如通过管道操作符来链式地添加额外的样式类，或者实现自定义的图标大小和颜色。 总体而言，font_awesomex使得在Elixir和Phoenix项目中使用Font Awesome图标变得...
React大模型网站-流式推送markdown转换问题以及开启 rehype-raw,rehype-sanitize,remark-gfm等插件的使用
m0_61998604的博客
12-04 1029
本文介绍了在React大模型网站中实现流式推送Markdown转换的方法，重点讲解了ReactMarkdown库及其配套插件的使用。主要内容包括：1）ReactMarkdown基础用法；2）通过rehype-raw插件支持HTML标签渲染；3）使用rehype-sanitize防止XSS攻击；4）利用remark-gfm支持GitHub风格的Markdown语法；5）给出了完整的流式渲染实现方案，包含SSE推送、内容累积和实时更新等关键技术。文章还提供了完整的代码示例，帮助开发者快速实现安全可靠的Markd
Vue 通用复选框组互斥 Hooks：兼容 Element Plus + Ant Design Vue
a3212768093的博客
12-02 584
本文介绍了一个通用的Vue Hooks useExclusiveCheckbox，用于实现复选框组的互斥选择功能。该Hooks兼容ElementPlus和AntDesignVue两大UI库，主要特点包括：跨UI库兼容、轻量无依赖、灵活配置互斥选项值、全场景适配和类型安全。核心逻辑通过对比新旧选中值数组，自动处理互斥选项与其他选项的切换关系。文章提供了完整代码和使用示例，分别演示了在ElementPlus和AntDesignVue中的实现方式，并解答了常见问题。该方案可显著提升开发效率，适用于各类需要互斥选择
50、【Ubuntu】【Gitlab】拉出内网 Web 服务：http.server 单/多线程分析（二）
最新发布
HIT_Weston的博客
12-04 1059
本文分析了Python的http.server模块在单线程和多线程模式下的性能表现。通过测试发现，单线程模式下（Python<3.7）并发请求会被阻塞，后发请求需要等待前一个请求完成；而多线程模式下（Python≥3.7）可以同时处理多个请求。作者通过slow_server.py脚本模拟耗时操作，使用time curl命令测试响应时间，验证了线程模型的差异。文章还指出Python 3.7是一个重要分水岭，官方将默认命令行服务器升级为多线程以提升用户体验。技术细节参考了CPython源码，并提供了Git
47、【Ubuntu】【Gitlab】拉出内网 Web 服务：Nginx 事件驱动分析（一）
HIT_Weston的博客
12-01 1129
本文分析了Python的http.server模块与Nginx在Web服务架构上的本质区别。作者指出http.server仅适用于开发测试，而GitLab等完整Web应用需要Nginx的高性能架构。重点阐述了Nginx的事件驱动模型：通过epoll实现异步非阻塞I/O，单线程可处理上万并发连接，避免了传统多线程的资源消耗。文章还展示了Nginx的C语言伪代码实现逻辑，说明其"不轮询、无阻塞、仅处理活跃连接"的核心机制。最后预告将继续深入分析Nginx配置优化等内容。
ruoyi集成camunda实现bpmn在线设计器
xrl2012的专栏
12-03 984
摘要： 本文介绍了如何在RuoYi-Vue2前端集成Camunda BPMN在线设计器，实现流程建模功能。通过npm安装bpmn-js等依赖包，配置vue.config.js解决转译和别名问题，并提供了测试页面代码示例。页面包含导入/导出XML/SVG、流程检查、部署等功能，支持BPMN流程设计器的初始化和基本操作。环境要求包括JDK 1.8+、MySQL 5.7+、Node 23+等。完整方案可参考若依工作流。
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值