网页使用思源字体 CSS

2024-06-01 17:14:24

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

思源字体

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，

转载于:https://www.cnblogs.com/xiadongqing/p/7080455.html

网页使用思源字体 CSS相关推荐

让你的网页引入思源字体
这段时间在做官网,设计师出了一份PSD,其他部分都搞完了,但就是字体,怎么我做出来的跟PSD字体完全两码事!?好丑啊!问了一下设计师,原来他用的字体叫思源黑体--我怎么没听过--后来查了才知道思源黑体 ...
思源字体的安装和使用
1.下载思源字体并且解压 2.在百度中搜索 font-face生成器或者点击网址 https://www.fontke.com/tool/fontface/ 打开生成器 , 3.点击上传字体文件 ...
word/exce转lPDF乱码（思源字体）
版本office 2016 PDF Adobe Acrobat 9 Pro 思源字体 1.Word 直接右键转换成PDF 会乱码 (调用的是Adobe PDF虚拟打印机,原理同2) 2.Word打开– ...
WPF 导入google思源字体(.otf）格式字体
wpf 导入google思源字体(.otf)格式字体 OpenType (.otf) OpenType是微软和Adobe共同开发的字体,微软的IE浏览器全部采用这种字体.致力于替代TrueType字体 ...
Android中添加思源字体/NotoSansCJK/SourceHanSans
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 系统版本 ...
Android中加入思源字体/NotoSansCJK/SourceHanSans
系统版本号:Android 4.2.2_r1 本文主要是在Android中加入思源字体的过程记录. 思源字体是Google和Adobe在2014.07.18公布的中文字体. 1.获取思源字体(Goog ...
html 字体思源_思源字体中日匹配
不熟悉思源字体又想用Aegisub尽快做出[规范的思源字体中日歌词样式]的新人请看下面这段,如下是已经调好的思源字体地区子集版和泛CJK版(7个字重全部调好)的中日匹配样式的外挂字幕文件的下载地址(内 ...
php怎么调整字体和图片距离,PHP计算思源字体宽度, 并把文字绘制到图片上
2019-6-19 9:18:54 星期三思源字体是一套开源的字体, 那字体宽度是多少呢? 测试场景, 将包含汉字, 数字, 大小写字符的一段文字写到图片中去, 但不能出现超出的情况, 这就要计算 ...
html 使用思源字体_Flutter使用思源字体
1.找到字体ttf 2.导入项目 fonts: - family: NotoSerif fonts: - asset: assets/fonts/NotoSerif-Regular.ttf - ass ...

最新文章

热门文章