如何在博客园中外挂字体 Lebal:Research

有时候我们会遇到想要的字体但是在博客园中没有办法选择的情况,这个时候可以选择外挂字体,示例代码(插入Klavika字体并将其命名为KlavikaRegular)如下

@font-face{
    /*将插入的字体命名为KlavikaRegular*/
    font-family:KlavikaRegular;
    /*以下几行都是插入字体的链接,包含各种格式*/
    src:url(https://jobs.amd.com/sites/amd/css/fonts/Klavika-RegularCond.otf);
    src:url(https://jobs.amd.com/sites/amd/css/fonts/Klavika-Condensed.eot);
    src:url(https://jobs.amd.com/sites/amd/css/fonts/Klavika-Condensed.eot?#iefix)
    format("embedded-opentype"),url(https://jobs.amd.com/sites/amd/css/fonts/Klavika-Condensed.woff)
    format("woff"),url(https://jobs.amd.com/sites/amd/css/fonts/Klavika-Condensed.svg) format("svg")
}

字体效果如下,也可点击图片前往AMD官网查看效果,本字体仅限英文,如果需要添加中文字体,请查看笔者另一篇博客:文件分发服务器,并用其中的字体链接替换上述代码中的链接

考虑到受众人群,本教程手把手教到位

使用方法

插入外挂字体代码

具体访问将以上代码粘贴到博客园-设置-页面定制CSS代码即可

修改文字的字体

先找到你想修改的段落,可以是标题,引用栏,凡是可以选择的文字都可以修改(此处请先下载chrome浏览器或者使用了Chromeium内核的浏览器,例如UC浏览器)

单击目标对象空白处,添加代码font-family:KlavikaRegular;

然后选择该元素所有的代码,复制

粘贴到这里的下方,点击保存,再刷新博客园页面,就可以发现字体已经被修改好了

原文地址:https://www.cnblogs.com/radiumlrb/p/11291771.html

时间: 2024-10-06 21:22:36

如何在博客园中外挂字体 Lebal:Research的相关文章

博客园中前辈技术总结会不会过期

问个问题,前辈们2009年以前写的.net开发经验,会不会已经过期?主要是javascript的还有asp.net的Webform的. 还有线程,asp.net登录验证,控件方式开发等. 博客园首页左侧有很多推荐博客,还有博问专家.博客混得多了,常跑到前辈的地盘,看着年龄都六年,七年,甚至十几年了. 博客园中我见很多前辈写.net技术,我主要关注的是asp.net这个方向,c#语言.很多大概都是高产三年以后就不怎么写了. 这些技术总结距今远的已经有7年8年,近的有六年,五年.我知道这些是博客园的

新浪微博微组件添加到博客园中

弄了半天,终于搞定了.将微博放入博客园是一件多么让人兴奋的事情. 刚开始都压根不知道要怎么用,只能在新浪开发平台上各种倒腾.最后才发现原来这么简单. 1.登录新浪微博开放平台,点击常用引导栏下的微组件 2.在微博组件中,选择一个你希望用到的 3.进到微博小工具后选择 博客挂件 在这里值的说的是,我刚开始就一直在弄我的微博秀,但是代码复制到博客园后总是清除掉.后来发现,用这个只能注册申请,而我们也没有自己的网站什么,真心很麻烦,所以直接用博客组件把.方便,省事.嘿嘿... 4.选定你的博客类型 5

【转】博客园中应用LaTex进行公式编写

在博客园中应用LaTex进行公式编写.切换到HTML编辑界面,加入如下语句: <img src="http://latex.codecogs.com/gif.latex?\sqrt{a^2+b^2}" title="\sqrt{a^2+b^2}" /> 其中 "\sqrt{a^2+b^2}" 即为要显现的公式. 显示结果为: [转]博客园中应用LaTex进行公式编写

博客园中实现代码高亮

本文目的:在博客园中引入sublime样式的代码高亮效果. 话不多说,先上效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>helloWorld</title> <style> div{ text-align: center; font-size: 20px; } </style

怎样在博客园中添加自己的导航栏

原本想在博客园中添加自己的导航栏,摸索一番后才发现,博客园没有提供添加自己导航栏的功能.要是能自己写js来添加应该也是可以的,于是申请了js权限,申请了好多次都不通过,~~o(>_<)o ~~,今天终于审核通过了,自己尝试来添加导航. 准备导航栏js 我自己写了一个简单的jquery插件来添加或者移除导航,好,不多说了,贴出代码: (function(jQuery) { var arr = [], slice = arr.slice; var methods = { init: functio

博客园中Bootstrap4点击查看结果模板代码

博客园中Bootstrap4点击查看结果模板代码 <span class="btn btn-danger" data-toggle="collapse" data-target="#result">点击查看结果</span> <div class="collapse" id="result">请在这里书写您的代码</div> 原文地址:https://www.

在博客园中复制代码到网页中,有时候会存在异常,如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } .warp{ background: #ddd; } </style></

码农人生——博客园中哪些人开通了技术公众号—第004期博文

这周写了几篇博文,感觉不是技术类的没有必放过来,只好准备收集下博客园中的技术公众号,有空研究下,大家是怎么传经送道的.这些年,觉得作为技术的开发者,也应该是技术的布道者,不仅仅是自己能够用技术干什么,重要的是自己的技术得到别人的认可,并且能够使得别人受益. 但是,大多数码农,勤勤恳恳,写作水平一般,并不是很能够表达,或者说写作是另一个行业,作为码农,可能没有太多的时间去创作,去学习一种叫做,如何写作教别人如果学习的技能. 现在我也是一样. 这里只是从前100名推荐名单中手工筛选出来的列表.如果出

博客园中使用 latex 公式

1.启用LaTeX数学公式支持的操作方法: 进入博客后台,在“选项”中选中“启用数学公式支持”. 启动之后,需要写公式时,插入个界定符: 大功告成,so easy ! 妈妈再也不用担心我的学习!