精华内容
下载资源
问答
  • 网页使用思源字体 CSS

    千次阅读 2017-06-26 14:33:00
    思源字体 2014年7月,Adobe与Google宣布推出一款新的开源字体思源黑体, 有七种字体粗细(ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy),完全支持日文、韩文、繁体中文和简体中文,还包括来自 ...

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

    思源字体

    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,

    展开全文
  • 让你的网页引入思源字体

    万次阅读 2016-07-06 14:34:32
    问了一下设计师,原来他用的字体思源黑体……我怎么没听过……后来查了才知道思源黑体字体是一款由Adobe和Google联手推出了一款开源字体,而且有七种粗细的字形:ExtraLight、Light、 Normal、Regular、Medium、...

    这段时间在做官网,设计师出了一份PSD,其他部分都搞完了,但就是字体,怎么我做出来的跟PSD字体完全两码事!?好丑啊!问了一下设计师,原来他用的字体叫思源黑体……我怎么没听过……后来查了才知道思源黑体字体是一款由Adobe和Google联手推出了一款开源字体,而且有七种粗细的字形:ExtraLight、Light、 Normal、Regular、Medium、Bold和Heavy。顺便安利一下Chrome的查看网页字体的插件:WhatFont,有了它就可以查看到你页面的文字是什么字体多大行高多少等等。
    知道了是思源字体,但怎样搞到我们的网站上去呢?首先想到的当然是web-font。于是就去查,发现第三方服务商有字库看起来不错,也有这种字体而且免费。但体验了一下,感觉很麻烦,要将自己所用到的字拿出来去它网站那里生成字体集。如果每次改动都这样搞那不坑死自己!?而且请求别人的东西还是有点慢和不稳定。Google font也是一种,但被墙得厉害,虽然有360网站卫士常用前端公共库CDN服务,但还是觉得不太靠谱,也没起试了。
    那还有什么好方法呢?千辛万苦终于找到它——font-spider(字蛛)!官网http://font-spider.org/index.html
    有了它我们可以干什么?我们就可以将我们喜欢的字体包下载下来,然后使用font-spider,它就会自动筛选出我们网页的文字,然后对应的删减字体包中除这些字以外的字,于是!剩下包的大小就很客观了!!
    字体包处理前后对比
    那么怎样使用它呢?
    安装的步骤就不说了,跟着官网来就可以了,我使用的是npm安装。然后去它的github里把字体包下载下来,我要下载的是思源字体。https://github.com/aui/gulp-font-spider
    现在就可以用起来了:
    1.在你需要使用思源字体的CSS中,写@font-face:

    /*声明 思源字体-Light*/
    @font-face {
      font-family: 'KaiGenGothicSC-Light';
      src: url('../font/join/KaiGenGothicSC-Light.eot');
      src:
        url('../font/join/KaiGenGothicSC-Light.eot?#font-spider') format('embedded-opentype'),
        url('../font/join/KaiGenGothicSC-Light.woff') format('woff'),
        url('../font/join/KaiGenGothicSC-Light.ttf') format('truetype'),
        url('../font/join/KaiGenGothicSC-Light.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }

    2.然后对元素正常使用font-family就可以:

    body{
        font-family: 'KaiGenGothicSC-Light';
    }

    3.最后,必须要调用一下这个font-spider才会生效,这一步就是这个插件帮我们自动处理字体包的一步。
    在cmd中输入D:\xampp\htdocs\official website\html>font-spider index.html。其实就是这个命令:font-spider ./demo/*.html。由于我的html在以上那个目录,所以我去到那个目录里,最后输入font-spider index.html。现在就可以了。
    这时会看到,插件根据原来ttf格式的文件,根据你所需文字自动压缩字体集,并且生成其他几种用于兼容不同浏览器的文件,最后还把原来的ttf文件用一个.font-spider文件夹装起来了。
    现在你就可以在你的网站中用上思源字体啦!

    展开全文
  • 思源字体下载使用

    千次阅读 2019-02-21 10:35:47
    问了一下设计师,原来他用的字体思源黑体……我怎么没听过……后来查了才知道思源黑体字体是一款由Adobe和Google联手推出了一款开源字体,而且有七种粗细的字形:ExtraLight、Light、 Normal、Regular、Medium、...

    这段时间在做官网,设计师出了一份PSD,其他部分都搞完了,但就是字体,怎么我做出来的跟PSD字体完全两码事!?好丑啊!问了一下设计师,原来他用的字体叫思源黑体……我怎么没听过……后来查了才知道思源黑体字体是一款由Adobe和Google联手推出了一款开源字体,而且有七种粗细的字形:ExtraLight、Light、 Normal、Regular、Medium、Bold和Heavy。顺便安利一下Chrome的查看网页字体的插件:WhatFont,有了它就可以查看到你页面的文字是什么字体多大行高多少等等。 
    知道了是思源字体,但怎样搞到我们的网站上去呢?首先想到的当然是web-font。于是就去查,发现第三方服务商有字库看起来不错,也有这种字体而且免费。但体验了一下,感觉很麻烦,要将自己所用到的字拿出来去它网站那里生成字体集。如果每次改动都这样搞那不坑死自己!?而且请求别人的东西还是有点慢和不稳定。Google font也是一种,但被墙得厉害,虽然有360网站卫士常用前端公共库CDN服务,但还是觉得不太靠谱,也没起试了。 
    那还有什么好方法呢?千辛万苦终于找到它——font-spider(字蛛)!官网http://font-spider.org/index.html 
    有了它我们可以干什么?我们就可以将我们喜欢的字体包下载下来,然后使用font-spider,它就会自动筛选出我们网页的文字,然后对应的删减字体包中除这些字以外的字,于是!剩下包的大小就很客观了!! 
     
    那么怎样使用它呢? 
    安装的步骤就不说了,跟着官网来就可以了,我使用的是npm安装。然后去它的github里把字体包下载下来,我要下载的是思源字体。https://github.com/aui/gulp-font-spider 
    现在就可以用起来了: 
    1.在你需要使用思源字体的CSS中,写@font-face:

    /*声明 思源字体-Light*/
    @font-face {
      font-family: 'KaiGenGothicSC-Light';
      src: url('../font/join/KaiGenGothicSC-Light.eot');
      src:
        url('../font/join/KaiGenGothicSC-Light.eot?#font-spider') format('embedded-opentype'),
        url('../font/join/KaiGenGothicSC-Light.woff') format('woff'),
        url('../font/join/KaiGenGothicSC-Light.ttf') format('truetype'),
        url('../font/join/KaiGenGothicSC-Light.svg') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    2.然后对元素正常使用font-family就可以:

    body{
        font-family: 'KaiGenGothicSC-Light';
    }
    1
    2
    3
    3.最后,必须要调用一下这个font-spider才会生效,这一步就是这个插件帮我们自动处理字体包的一步。 
    在cmd中输入D:\xampp\htdocs\official website\html>font-spider index.html。其实就是这个命令:font-spider ./demo/*.html。由于我的html在以上那个目录,所以我去到那个目录里,最后输入font-spider index.html。现在就可以了。 
    这时会看到,插件根据原来ttf格式的文件,根据你所需文字自动压缩字体集,并且生成其他几种用于兼容不同浏览器的文件,最后还把原来的ttf文件用一个.font-spider文件夹装起来了。 
    现在你就可以在你的网站中用上思源字体啦!
    --------------------- 
    作者:写Bug 
    来源:CSDN 
    原文:https://blog.csdn.net/qq_26598303/article/details/51838718 
    版权声明:本文为博主原创文章,转载请附上博文链接!

    展开全文
  • 此为思源字体的简体中文版 谷歌公司将这款被Adobe公司称为“思源黑体”的新字体命名为“NotoSans CJK”。它可以为人们带来愉悦和高效的信息阅读体验。 Noto SansCJK在一款字体中全面支持了简体中文、繁体中文、日文...
  • web 引入思源字体

    千次阅读 2019-05-14 10:37:52
    1.下载SourceHanSansCN-Regular.TTF https://www.fontke.com/font/18839412/download/ 2.解压得到左边文件 3.找到在线font-face生成器 ... 根据提示上传SourceHanSansCN-Regular.TTF 可以得到以下文件: ...

    1.下载SourceHanSansCN-Regular.TTF

    https://www.fontke.com/font/18839412/download/

    2.解压得到左边文件

    3.找到在线font-face生成器

    https://www.fontke.com/tool/fontface/

    根据提示上传 SourceHanSansCN-Regular.TTF

    可以得到以下文件:

    4.引入项目

    在需要的地方引入 .css 文件;

    展开全文
  • Android中添加思源字体/NotoSansCJK/SourceHanSans
  • html思源黑体字体

    2019-02-27 10:33:27
    包含.ttf以及其他文件类型,多种思源黑体html移动包,直接引入即可。
  • Adobe与Google宣布推出一款新的开源字体思源黑体,有七种字体粗细(ExtraLight、 Light、Normal、Regular、Medium、Bold和Heavy),完全支持日文、韩文、繁体中文和简体中文,还包括来自 SourceSans字体家族的拉丁文...
  • 思源黑体-好用的字体

    2014-08-18 21:14:10
    思源黑体,好用的字体
  • 思源宋体作为一款比较适合阅读的开源衬线字体,作为博客字体能够有效的提高阅读体验,同时得力于Google Font 对于思源宋体的支持,可以方便的进行网页端的配置与使用。 衬线字体,意思是在字的笔画开始、结束的地方...
  • 一. Vue项目引入字体(思源黑体)

    千次阅读 2020-03-03 16:05:05
    通过Google Fonts资源引入字体方式 在项目index.html , 通过Link标签在网页头部引用 ...--引入思源字体--> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=No...
  • 如何在HTML网页引入思源黑体

    千次阅读 2020-09-21 11:37:06
    通过Link标签在网页头部引用Google Web Font: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"> 字体:Noto Sans SC 大小:100, 300, 400,...
  • 网页字体设置

    2016-03-10 14:46:01
    本人采取的是懒人建站的方案: pc端:font-family: "Hiragino Sans GB", "Microsoft Yahei", ...这些网页字体依次是 “苹果丽黑字体”(这个是苹果系列设备上用),微软雅黑、文泉驿(细)微米黑字体,宋体,Tahoma,Arial
  • 日常开发网页经常会使用一些特殊字体,比如思源黑体、苹方字体等,因为这些字体在一般的宿主环境中是不存在的,需要通过 css 的 @font-face 定义,并从服务器中加载对应的字体文件,而字体文件一般都是比较大的,...
  • 日常开发网页经常会使用一些特殊字体,比如思源黑体、苹方字体等,因为这些字体在一般的宿主环境中是不存在的,需要通过 css 的 @font-face 定义,并从服务器中加载对应的字体文件,而...
  • 但是有个问题就是即使本地安装思源黑体的字体网页是要上传到服务器的,用户访问网站,他们的电脑可不一定有思源黑体这种字体,除非在客户端安装这种字体,不然用户电脑是无法显示这种字体的。 ①首先在自己本机上...
  • 网页嵌入新字体

    2019-10-15 17:18:48
    只要下载好字体,将字体名称和格式一起复制过来,就可调用,但是没有使用更多浏览器测试兼容效果。 /*嵌入字体*/ @font-face{ font-family:myFirstFont; /*自己命名新字体名称便于调用*/ /*src:url(../fonts/...
  • 网页字体排印指南

    2015-05-24 20:42:00
    关于网页上百分之九十五的信息是「文字」,大多数人浏览网页的状态就是阅读,也就是你目前正在做的事情. 因此作为一名前端工程师,让文字更好地在网页显示,是一件极其重要的工作.字体排印有两种形式,一种称为 ...
  • web网页引入自定义字体设置

    万次阅读 2017-11-30 11:55:20
    1、首先需要下载你需要的字体,此项目中用到的字体思源黑体(light),需要字体文件的格式是.ttf,思源的ttf版字体不好找,我是下载的otf版,又用fontCreate 软件转换了一下,算是得到了ttf字体(废了老大劲,才...
  • SourceHanSansCN 思源黑体

    2018-02-21 09:46:12
    思源黑体字体是一款由Adobe和Google联手推出了一款开源字体,字型一共分为七种粗细,包括ExtraLight、Light、 Normal、Regular、Medium、Bold和Heavy,并完全支持日文、韩文、繁体中文和简体中文,同时包括来自Source ...
  • 写这个的原因:我任职过几家公司,总是会遇到设计师全站的设计稿会用到平方,思源,冬青黑体等等字体,设计稿确实还挺好看,但是,我该怎么按照设计稿把网页还原呢?相信很多写过页面的人都有这个苦恼,那么,我们该...
  • 思源黑体.zip

    2019-08-21 11:22:22
    该资源是思源黑体相关的源码,以及通过font-face生成的css可用的字体源码。
  • 浏览器打开网页字体,可以通过安装油猴插件的方式实现自定义,带来统一的阅读体验。 引言 效果图示例如下。 效果图上图左侧,用 Safari 打开百度百科词条页面,默认显示的网页字体是 macOS 中自带的仿宋体。...
  • 网页引用第三方字体总结

    千次阅读 2019-03-04 19:53:21
    前言:绝大多数情况下网页制作为了美观,会额外引用第三方字体。很久以前会把特殊字体切成图片,但后期维护成本太大了,小小改动都需要设计师进行修改,人工成本实在太大了,亦或是让设计师修改成“web-safe”的字体...
  • 字体

    2018-01-03 15:18:00
    网页字体: 使用css中的font-family引用客户端字体是合法的,如果使用@font-face引用下载的字体或服务端返回存在的字体样式则是侵权的 转载于:https://www.cnblogs.com/maoriaty/p/8183918.html...

空空如也

空空如也

1 2 3 4 5 ... 16
收藏数 303
精华内容 121
关键字:

思源字体网页