网页使用思源字体 CSS
在知乎上再次看到这门字体的提问,想想中文字体过得多么艰辛,中文软件过得多么艰辛。
思源字体
2014年7月,Adobe与Google宣布推出一款新的开源字体思源黑体, 有七种字体粗细(ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy),完全支持日文、韩文、繁体中文和简体中文,还包括来自 Source Sans字体家族的拉丁文、希腊文和西里尔文字形。
至于为什么是叫这个名字就变得不是很重要,只是让人有预感,很快这些字体将会无处不在。
- Android自带的字体难看
- Adobe Reader很受欢迎
So,这两家公司会在自家的产品上用上这些字体。
下载地址:
Adobe思源: http://sourceforge.net/projects/source-han-sans.adobe/
Google Noto: http://www.google.com/get/noto/
思源字体 CSS
考虑到我姐给我的建议是首页换一个厚重点的字体,于是就换吧。
在网上搜了一下,下了一个然而和官方的似乎是不一样的,官方的font-family应该是Source Han Sans CN。于是我们的CSS代码就出来了
font-family: "Source Han Sans CN"
将之放在首页上的字体。
如果是谷歌的Noto的话
font-family: "noto sans"
简单的对比一下
原来的字体结果如下所示
<img alt="原文字" src="/static/media/uploads/screen_shot_2014-07-28_at_13.53.51.png" width="600"/>
新的字体,看词的正文
<img alt="思源文字" src="/static/media/uploads/screen_shot_2014-07-28_at_13.53.42.png" width="600"/>
似乎看起来还不错的样子。
其它
可惜的是没有Web Font在当前,要不就爽了,中文的Web Font,
网页使用思源字体 CSS的更多相关文章
- Android中加入思源字体/NotoSansCJK/SourceHanSans
系统版本号:Android 4.2.2_r1 本文主要是在Android中加入思源字体的过程记录. 思源字体是Google和Adobe在2014.07.18公布的中文字体. 1.获取思源字体(Goog ...
- PHP计算思源字体宽度, 并把文字绘制到图片上
2019-6-19 9:18:54 星期三 思源字体是一套开源的字体, 那字体宽度是多少呢? 测试场景, 将包含汉字, 数字, 大小写字符的一段文字写到图片中去, 但不能出现超出的情况, 这就要计算 ...
- 详解CSS网页布局中默认字体样式
浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...
- 网页引用本地电脑的字体 css设置浏览器会不显示的解决办法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 《网页设计基础——HTML注释与CSS注释》
网页设计基础--HTML注释与CSS注释 一.HTML注释: 格式: <!-- 在此处书写注释 --> 例如: <html> <head> <ti ...
- 向网页中写入js和css
向网页中写入js和css 本函数由前辈所写 loadFile: function (url, ftype) { var fileref; if (ftype == "js") { ...
- css3-11 网页如何使用自定义字体
css3-11 网页如何使用自定义字体 一.总结 一句话总结:下载好字体文件,然后在网页中引入,用src: url('my.otf');来引入,使用的时候就使用自己定义的名字来使用这个字体. 1.网页 ...
- Windows下自动云备份思源笔记到Gitee
前言 思源笔记是一款本地笔记为主的软件,其目前提供了148元/year的付费同步功能,但对于21世纪中国难民而言还是太贵啦. 条件允许的同学还是使用官方的同步,支持下作者. 所以,就在思考有没有白嫖的 ...
- 在CSS中通过@font-face属性来实现网页中嵌入特殊字体。
首先获取要使用字体的三种文件格式.EOT..TTF或.OTF..SVG,确保能在主流浏览器中都能正常显示该字体..EOT,适用于Internet Explorer 4.0+.TTF或.OTF,适用于F ...
随机推荐
- windows多线程同步--互斥量
关于互斥量的基本概念:百度百科互斥量 推荐参考博客:秒杀多线程第七篇 经典线程同步 互斥量Mutex 注意:互斥量也是一个内核对象,它用来确保一个线程独占一个资源的访问.互斥量与关键段的行为非常相似, ...
- angularjs drag and drop
angular-dragula Drag and drop so simple it hurts 480 live demo angular-drag-and-drop-lists Angular d ...
- set,env,export,source,exec傻傻分不清楚?
https://segmentfault.com/a/1190000013356532
- C++11 lambda表达式是如何实现的?
lambda表达式是如何实现的呢? 其实是编译器为我们了创建了一个类,这个类重载了(),让我们可以像调用函数一样使用.所以,你写的lambda表达式和真正的实现,是这个样子的: 而对于捕获变量的lam ...
- webpack中file-loader和url-loader的关系
url-loader把资源文件转换为URL,file-loader也是一样的功能. 不同之处在于url-loader更加灵活,它可以把小文件转换为base64格式的URL,从而减少网络请求次数.url ...
- 基于Centos搭建 Discuz 论坛
系统要求:CentOS 6.8 64 位操作系统 搭建 Discuz 论坛 准备 LAMP 环境 LAMP 是 Linux.Apache.MySQL 和 PHP 的缩写,是 Discuz 论坛系统依赖 ...
- 基于Ubuntu + nextCloud 搭建自己的私人网盘
系统要求:Ubuntu 16.04.1 LTS 64 位操作系统 基础设置 切换为 root 账号 Ubutu 系统默认登录的用户为非 root 权限用户,为了能正常安装 nextCloud,需要切换 ...
- RabbitMQ ——“Hello World”
介绍 RabbitMQ是一个消息实体服务(broker):它接收及转发消息.你可以把它想象成一个邮局:当你把你想要寄送的邮件放进邮箱里时,你能够确信邮局的派送员最终会把你的这封邮局送到这信的收件者手中 ...
- 在Windows服务器上启用TLS 1.2及TLS 1.2基本原理
在Windows服务器上启用TLS 1.2及TLS 1.2基本原理 在Windows服务器上启用TLS 1.2及TLS 1.2基本原理 最近由于Chrome40不再支持SSL 3.0了,GOOGLE认 ...
- Springmvc 整合 jetbrick 实例
应用环境: <jetbrick.version>1.2.8</jetbrick.version> <antlr4-runtime.version>4.2.2< ...