在知乎上再次看到这门字体的提问,想想中文字体过得多么艰辛,中文软件过得多么艰辛。

思源字体

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的更多相关文章

  1. Android中加入思源字体/NotoSansCJK/SourceHanSans

    系统版本号:Android 4.2.2_r1 本文主要是在Android中加入思源字体的过程记录. 思源字体是Google和Adobe在2014.07.18公布的中文字体. 1.获取思源字体(Goog ...

  2. PHP计算思源字体宽度, 并把文字绘制到图片上

    2019-6-19 9:18:54 星期三 思源字体是一套开源的字体, 那字体宽度是多少呢? 测试场景, 将包含汉字, 数字, 大小写字符的一段文字写到图片中去, 但不能出现超出的情况,  这就要计算 ...

  3. 详解CSS网页布局中默认字体样式

    浏览器默认的样式往往在不同的浏览器.不同的语言版本甚至不同的系统版本都有不同的设置,这就导致如 果直接利用默认样式的页面在各个浏览器下显示非常不一致,于是就有了类似YUI的reset之类用来尽量重写浏 ...

  4. 网页引用本地电脑的字体 css设置浏览器会不显示的解决办法

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 《网页设计基础——HTML注释与CSS注释》

    网页设计基础--HTML注释与CSS注释       一.HTML注释: 格式: <!-- 在此处书写注释 --> 例如: <html> <head> <ti ...

  6. 向网页中写入js和css

    向网页中写入js和css 本函数由前辈所写 loadFile: function (url, ftype) { var fileref; if (ftype == "js") { ...

  7. css3-11 网页如何使用自定义字体

    css3-11 网页如何使用自定义字体 一.总结 一句话总结:下载好字体文件,然后在网页中引入,用src: url('my.otf');来引入,使用的时候就使用自己定义的名字来使用这个字体. 1.网页 ...

  8. Windows下自动云备份思源笔记到Gitee

    前言 思源笔记是一款本地笔记为主的软件,其目前提供了148元/year的付费同步功能,但对于21世纪中国难民而言还是太贵啦. 条件允许的同学还是使用官方的同步,支持下作者. 所以,就在思考有没有白嫖的 ...

  9. 在CSS中通过@font-face属性来实现网页中嵌入特殊字体。

    首先获取要使用字体的三种文件格式.EOT..TTF或.OTF..SVG,确保能在主流浏览器中都能正常显示该字体..EOT,适用于Internet Explorer 4.0+.TTF或.OTF,适用于F ...

随机推荐

  1. Scala:First Steps in Scala

    var and val 简单来说,val声明的变量可以重新修改其引用,val则不行,见下面的例子: def max(x: Int, y: Int): Int = { if(x > y) x el ...

  2. 【Spark】Spark性能调优

    官网:http://spark.apache.org/docs/latest/tuning.html 1.引言 提到Spark与Hadoop的区别,基本最常说的就是Spark采用基于内存的计算方式,尽 ...

  3. 微软BI SSIS 2012 ETL 控件与案例精讲面试 200 问(SSIS 面试题,ETL 面试题)

    开篇介绍 本自测与面试题出自 微软BI SSIS 2012 ETL 控件与案例精讲 (http://www.hellobi.com/course/21) 课程,对于学完本课程的每一课时和阅读完相关辅助 ...

  4. QueryRunner类实战

    先上一个登录代码---判断登录是否成功 1.c3p0-config.xml <?xml version="1.0" encoding="UTF-8"?&g ...

  5. 四舍五入函数ROUND(x,y)

    四舍五入函数ROUND(x,y) 参数: x:数据 y:需要保留的小数点位数 ROUND(x,y)函数返回最接近于参数x的数,其值保留到小数点后面y位,若y为负值,则将保留x值到小数点左边y位. my ...

  6. Android Studio 常用快捷键 for mac

    Android Studio 常用快捷键 for mac 查找/查看相关 ⌘O: 全局查找class类名<使用率非常高> ⌘F: 在当前编辑文件中查找<使用率非常高> | 对应 ...

  7. 11G新特性 -- Multicolumn Statistics (Column groups)

    默认oracle会收集表中各个列的统计信息,但是会忽略列之间的关联关系.在大多情况下,优化器假设在复杂查询中的列之间是独立的.当where子句后指定了一个表的多个列条件时,优化器通常会将多个列的选择性 ...

  8. 电子证书 DER & PEM & CRT & CER

    原文链接: http://blog.csdn.net/zqt520/article/details/26966603 证书与编码 本至上,X.509证书是一个数字文档,这个文档根据RFC 5280来编 ...

  9. 空间谱专题02:波束形成(Beamforming)

    作者:桂. 时间:2017-08-22  10:56:45 链接:http://www.cnblogs.com/xingshansi/p/7410846.html 前言 本文主要记录常见的波束形成问题 ...

  10. 物联网架构成长之路(20)-申请免费SSL证书

    0.前言 今天域名备案申请下来了,接下来就是申请个SSL证书,现在普通的网站没有SSL都不好意思见人了.可是稍微好点的企业级SSL证书还是比较贵的.不过还好有免费的可以用.只不过要定时去续时间.这个不 ...