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

思源字体

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. android:单位和尺寸

    为了要让程序拥有更好的屏幕适配能力,在指定控件和布局大小的时候 最好使用 match_parent 和 wrap_content,尽量避免将控件的宽和高设定一个固定值.不过在 有些情况下,仅仅使用 m ...

  2. su 与 su - 比较

    原文地址:http://blog.chinaunix.net/uid-25557346-id-2889329.html   今天有一同事说在切换用户的时候,找不到该用户下用户命令,后来仔细检查了一下过 ...

  3. Opencv中Mat矩阵相乘——点乘、dot、mul运算详解

    Opencv中Mat矩阵相乘——点乘.dot.mul运算详解 2016年09月02日 00:00:36 -牧野- 阅读数:59593 标签: Opencv矩阵相乘点乘dotmul 更多 个人分类: O ...

  4. 在ASP.NET Core2.0中使用百度在线编辑器UEditor(转)

    一.起因 UEditor是百度旗下的富文本编辑器,对于后端上传处理仅提供了Asp.Net 版的支持. 如果想在.Net Core项目中使用,那么后台上传接口需要重构. UEditorNetCore:百 ...

  5. Revit对齐工具之多重对齐

    Revit对齐工具用来将一个或多个图元与选定图元对齐,比如建筑建筑时可以将梁.墙.柱等对齐到轴网,或者其它类似的图元的对齐,可以对齐同一类型的图元,或者不同类型族间的对齐,可以在二维视图.立面视图和三 ...

  6. 如何在Angular优雅编写HTTP请求

    原文:https://segmentfault.com/a/1190000010570799 ----------------------------------------------------- ...

  7. grid - 网格线命名

    通过grid-template-rows和grid-template-columns定义网格时,网格线可以被命名.网格线名称也可以设置网格项目位置. grid-template-rows和grid-t ...

  8. NuGet Package Explorer

    https://www.microsoft.com/zh-cn/store/p/nuget-package-explorer/9wzdncrdmdm3?ocid=badge&rtc=1

  9. docker 安装hadoop

    上一篇文章介绍了一些docker的基本命令,这篇文章来安装一个HADOOP 一.下载hadoop镜像 @~/git/github/docker-ambari (master)$ docker pull ...

  10. tmux 共享窗口大小

    http://www.cnblogs.com/bamanzi/p/tmux-share-windows-between-sessions.html