<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
一、学习html学的是什么?
1.1学标签
我要什么内容,就用什么标签 在去思考使用标签的什么属性
比方说:文字就用文字标签,HelloWorld 6号字 颜色变成红色
<html>
<head>
<title></title>
</head>
<body>
<font size="6" color="red" >HelloWorld </font> //这个就是文字标签 属性尺寸是6,颜色是红色
</body>
</html>
二、编写格式
1、每个网页页面都是一个单独的文件,页面的后缀是XXXX.html 或者 XXXX.htm
2、编译器/解释器就是浏览器,浏览器会一行行编译,不会像C 或者PLC等还需要再次编译。
3、用记事本做演示,需要把后缀名改成.html ,如果后缀名被隐藏了,需要在文件菜单-查看-选项-查看-把隐藏已知文件类型的拓展名去掉
<html> //html开始
<head> //头标签开始
<title></title>
</head> //头标签结束
<body> //身体标签开始
HelloWorld //主体内容
</body> //身体标签结束
</html> //html结束
三、常用标签及其属性:
3.1 文本修饰
font 行内标签 (没有换行效果)
size 字体的大小,最大值是7
color 颜色值
颜色的第一种表示形式:颜色单词 red green blue
颜色的第二种表示形式: 颜色的RGB 如:rgb(0,0,255) 第一个0表示R红色的份数,第二个表示G绿色的份数 ,第三个0表示B蓝色的份数
颜色的第三种表示形式:十六进制表示,把颜色这个写成#0000ff ,就是第一个红绿蓝十六进制,
face 字体族 黑体 楷体 宋体 华文彩云等 但必须是浏览器支持的字体
节我们来讲字体样式,之前我们学习 HTML 的时候学过一些用于字体加粗、倾斜的标签,但是使用标签来实现的效果肯定没有我们通过 CSS 中的样式来的方便。
接下来我们会给大家介绍下面这几个属性的使用:
通过学习上述这几个 CSS 属性,我们可以实现给 HTML 中的文字设置字体、大小、风格、倾斜、加粗等。
font-family 属性用于设置一个元素的字体,字体就是像宋体、楷体等。
通过 font-family 属性,可以同时声明多种字体,字体之间使用逗号分隔。根据字体的调用原则,会优先调用第一种字体,如果没有找到,则会尝试调用下一个字体,如果都找不到则调用默认字体。
示例:
例如为下面这个 <p> 标签中的文本设置字体:
<p>Hello,侠课岛</p>
可以使用标签选择器,然后在 font-family 属性中设置:
p{
font-family:'Times New Roman','sans-serif', 宋体, 楷体;
}
在声明字体时,我们应该分别声明英文字体和中文字体,且英文字体的声明应该在中文字体之前。因为绝大部分中文字体里包含英文字母,但是不是很好看,而英文字体里不包含中文字符。所以如果我们不希望用中文字体来显示英文,就一定要记得先声明英文字体。先声明的会先调用。
常用英文字体:Arial、Helvetica、Tahoma、Verdana、Lucida Grande、Georgia 等。
常用中文字体:宋体 SimSun、黑体 SimHei、微软雅黑 Microsoft YaHei、仿宋 FangSong、楷体 KaiTi 等。
font-size 属性用于设置字体的大小,常用的单位为 px,即像素。
px 是 Pixel 的缩写,是可以在数字显示设备上显示和表示的数字图像或图形的最小单位。像素是数字图形中的基本逻辑单元,像素也称为图像元素。
示例:
例如我们来看下面这段代码(其他HTML结构代码没有展示出来):
<body>
<h1>断句</h1>
<p>近水楼台先得月,向阳花木易为春。</p>
</body>
在浏览器中的演示效果为:
然后此时,我们通过 font-size 来将其中的 <h1> 标签中的字体设置为 14px,<p> 标签中的字体设置为 20px:
h1{
font-size: 14px;
}
p{
font-size: 20px;
}
在浏览器中演示效果就变为了下图所示:
很明显,通过 CSS 中的 font-size 属性可以设置任意标签中的字体大小。
font-style 设置字体的风格,可以将字体设置成斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。
此属的常用属性值如下所示:
示例:
将下面三个 <p> 中的内容设置为不同的字体风格,可以使用类选择器:
<body>
<p class="normal">将字体设置为标准的字体样式</p>
<p class="italic">将字体设置为斜体的字体样式</p>
<p class="oblique">将字体设置为倾斜的字体样式</p>
</body>
CSS 样式代码:
.normal {
font-style:normal;
}
.italic {
font-style:italic;
}
.oblique {
font-style:oblique;
}
在浏览器中演示效果如下所示:
font-weight 属性用于设置显示元素的文本中所用的字体加粗。
此属性的常用属性值如下所示:
示例:
将下面的 <p> 标签的粗细分别设置为 normal、bold、700、900:
<p class="w1">将字体设置为:normal</p>
<p class="w2">将字体设置为:bold</p>
<p class="w3">将字体设置为:700</p>
<p class="w4">将字体设置为:900</p>
CSS 样式代码:
.w1 {
font-weight: normal;
}
.w2 {
font-weight: bold;
}
.w3 {
font-weight: 700;
}
.w4 {
font-weight: 900;
}
在浏览器中演示效果:
font 属性用于在一个声明中设置所有的字体属性,各个属性之间使用空格隔开。也就是上述几个属性的综合简写属性。
如果我们使用 font 属性来设置字体样式,设置顺序分别是:font-style、font-variant、font-weight、 font-size/line-height、font-family。可以不设置其中的某个值,未设置的属性会使用其默认值。
示例:
<p class="p1">草长莺飞二月天,拂堤杨柳醉春烟。</p>
<p class="p2">留连戏蝶时时舞,自在娇莺恰恰啼。</p>
CSS 样式代码:
.p1{
font: italic bold 20px 'sans-serif', 楷体;
}
.p2{
font: bold 14px 'Arial', 宋体;
}
在浏览器中演示效果:
注意,在使用 font 属性时,font-size 和 font-family 的值是必需的,如果没有设置这两个属性值,则不会生效。
本节学习的几个属性值都是 CSS 中最基本的属性,特别是 font-size 属性,我们会经常用到。一般浏览器会有一个默认的字体大小,例如 16px,而编写页面时如果我们希望大部分页面内容正文字体大小为 12px 或 14px,就会在 <body> 标签上设置,这样就不用一个个标签去设置。
费可商用字体,一直是设计师心中永远的痛(尤其是中文字体),今天,我们带大家来看一波免费可商用字体。
下载地址:https://github.com/adobe-fonts/source-han-sans/(或后台直接回复关键词“思源黑体”)
思源黑体(英语:Source Han Sans)是Adobe与Google所领导开发的开源字体家族,1.001及更早版本以Apache 2.0许可证授权,而1.002及更新版本则使用SIL开源字体授权,属于无衬线黑体。思源黑体于2014年7月16日首次发布,支持繁体中文、简体中文、日文及韩文,并且有七种字体粗细(ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy)。公开之时为当时涵盖字符数量最多的字体,44,666个字符分属于65,535个字形中,此为OpenType字体技术的极限。就版权而言,思源黑体不得不说是业界良心,可以免费商用,甚至于可以修改。
下载地址:https://github.com/googlei18n/noto-cjk
思源宋体是 Adobe Type 发布的最新泛 CJK 字体,它是对应于思源黑体的宋体字体;他们发布这两种字体是为了响应统一设计的需求,以服务于东亚 15 亿人口。思源宋体支持四种不同的东亚语言(简体中文、繁体中文、日语和朝鲜语),7 种粗细类型中的每一种都有 65,535 个字形,可共同呈现一致的视觉美感。该字体还包含多个西方字形,支持拉丁语、希腊语和西里尔文脚本,这些字形均来源于 Source Serif。
下载地址:http://jikasei.me/font/genjyuu/
这个字体是基于思源黑体修改而成的,作者是日本的自家製フォント工房。
同样的它提供了三种不同圆角程度的版本,以及七种不同粗细的版本。
下载地址:http://fonts.jp/hanazono/
花园明朝 (Hanazono) 是一款免费字体,为 GlyphWiki 所开发,字形数量共 45090 + 47186 个,几乎收录了所有汉字字形。缺点是字形以日本字形为准,有一些字不符合中文书写规范(不论是大陆规范还是港台规范)。
下载地址:网上到处有,搜索下就有
王汉宗自由字型由研发天蚕字库的台湾中原大学数学系王汉宗教授先分别在2000年和2004年先后捐出十套WCL系列字型和32套新字型,全部以GNU GPL许可分发。
2005年,台湾著名字型厂商文鼎科技认为王汉宗字型与文鼎的字型极度相似,一些自由软件网站决定在问题明了前先移除字型下载以避免法律问题。 然而云端字型服务公司 justfont 则不认为存在授权问题,在提供字型列表中可见到 17 个王汉宗自由字型。文鼎公司觉得王汉宗有许多套字型是 copy 自文鼎字型。但是如果说是完全抄袭,也会有争议,因为虽然骨架相同,但描绘点并不一样,法律上顶多只能算是「疑似」抄袭。
另外就「隶书」、「仿宋」、等字型来说,文鼎公司也并非独创,有许多字型公司的同名字型几乎长得其实一模一样。这么一来其实很难说谁抄谁。不过,为了避免争议,我们在此还是列出文鼎公司主张侵权的王汉宗字型供大家参考:王汉宗中仿宋、王汉宗中仿宋简体、王汉宗隶书体、王汉宗中明体、 王汉宗粗明体、王汉宗特明体、王汉宗细圆体、王汉宗特圆体、王汉宗迭圆体、王汉宗勘亭流、王汉宗综艺体、王汉宗中行书、王汉宗综艺体双空阴、王汉宗粗楷体简体。文鼎公司主张以上王汉宗字型侵权,使用前请斟酌。其他部分的王汉宗字体则无争议。
下载地址:http://wenq.org/wqy2/index.cgi
文泉驿是一个开源汉字字体项目,由旅美学者房骞骞(FangQ)于2004年10月创建,集中力量解决GNU/Linux高质量中文字体匮乏的状况。
目前,文泉驿已经开发并发布了第一个完整覆盖GB18030汉字(包含27000多个汉字)的多规格点阵汉字字库,第一个覆盖GBK字符集的开源矢量字库(文泉驿正黑),并提供了目前包含字符数目最多的开源字体——GNU Unifont——中绝大多数中日韩文相关的符号。
这些字库已经逐渐成为主流Linux/Unix发行版中文桌面的首选中文字体。目前Ubuntu、Fedora、Slackware、Magic Linux、CDLinux使用文泉驿作为默认中文字体,Debian、Gentoo、Mandriva、ArchLinux、Frugalware则提供了官方源支持,而FreeBSD则在其ports中有提供。
目前有
清晰锐利的传统中文界面:文泉驿点阵宋体
柔和圆润的现代中文界面:文泉驿正黑
柔和与清晰的智能组合:文泉驿点阵正黑
兼顾中英文对齐的等宽开源字体:文泉驿等宽正黑
很小很强大的高质量矢量字体:文泉驿微米黑
经典的等宽点阵中文字体:文泉驿Unibit
下载地址:http://www.zcool.com.cn/special/zcoolfonts/#firstPage
站酷高端黑
2014年圣诞,站酷网发布了一款完全免费的中文字体“站酷高端黑”,2015年1月13日,在收集了设计师网友的意见后,站酷高端黑修订版发布。这款制作历时八个月的字体由站酷网字体设计师胡晓波、刘兵克发起,参与汉字百人舞100位字体设计师共同完成。全部字形以众包的形式由分散在全国的79名设计师分别完成,包含6763个汉字、数字和英文字母。
站酷快乐体
站酷快乐体由字体设计师刘兵克及150位字体设计的朋友制作而成。这套风格轻松活泼的字体也是积站酷高端黑后,第二套由酷友集体创作完成,供所有人永久免费使用(可商用)的工艺字体。
站酷快乐体是一例风格轻松和简单的字体,无论是笔画结构,还是笔画粗细,都很灵活,设计难度并不是很大。考虑到我们每个人的设计水平会有些许差别,选择设计这样的字体,成功率和准确率都会高很多,字与字之间的协调性统一性也更容易实现。
站酷酷黑体
由胡晓波发起,字游工作室成员进行基础字形设计。胡晓波设计班十名学员共同设计完成。字形笔画粗犷有力,用宽扁型的字面构建出厚重的字体形态,笔画细节上的修饰既增强了字体的设计感,又让字体多了一些小小的精致感,中宫的饱满使得文字之间的排版组合非常醒目好看。包含3500个常用字,52个英文字母,10个阿拉伯数字。
ZCOOL Addict Italic
插播一个英文字体,[ZCOOL Addict Italic]站酷意大利体是由大猫Addict设计,站酷冠名的首款公益西文字库, 是可免费商用的西文字,2016年5月发布第一版。字数:52个字母,10个数字,24个符号。使用范围:免费授权全社会使用(包括商用)。
下载地址:https://www.foundertype.com/index.php/FindFont/index.html
不多说,方正有四款字体可以免费商用,但是需要书面授权,四个字体分别是:方正黑体、方正书宋、方正仿宋、方正楷体。
下载地址:http://www.arphic.com.tw/zh-tw/support/index#download
以前文鼎字体有很多免费可商用的,现在也只有五个了:文鼎细上海宋繁体、文鼎中楷繁体、文鼎报宋简体、文鼎简中楷简体,文鼎PL明體U20-L。
下载地址:https://www.dropbox.com/s/vj2yg2p5uf699fy/SetoFont.TTF?dl=0
濑户字体,是一款偏可爱风的字体,支持简体中文、繁体中文、日文,包含CJK常用汉字、平片假名、JIS第一至四级,共30000余字。
下载地址:http://www.cns11643.gov.tw/AIDB/download.do?name=%E5%AD%97%E5%9E%8B%E4%B8%8B%E8%BC%89
《说文解字》是中国第一部系统地分析汉字字形和考究字源的字书。许慎着,成于安帝建光元年(121年)。原书十四篇,叙目一篇,正文以小篆为主,收9353字,又古文、籀文等异体同文1163字,解释十三万余字。
目前采用的版本为艺文印书馆所出版之《说文解字注》,系由南唐徐铉所校定,清代段玉裁注之版本(世称大徐本)并参考黎明文化事业公司之《说文解字注》,及南唐徐锴所撰之《说文解字系传》
由于说文解字原文与现行之Unicode编码并无一完整的对应,因此无法将所有的字形收录于本字型文件内以致于会有部份字码无法显示出正确字形的情形发生!(目前收录于本字型文件内的字数共计有6721个字)
估计没人会用,淡淡的忧伤!
Droid Sans Fallback 是当年 Google 为推出 Android 设备时,委托台湾华康科技(威锋数位)为东亚各国字符设计的一款字体,承袭了 DFHeiW5-A 的设计风格,但是同时有些字形的间架结构不是很完美。之后文泉驿开始以 Droid Sans Fallback 为蓝本设计出了文泉驿微米黑,可以说Droid Sans Fallback 和文泉驿微米黑有着浓厚的血缘关系。
下载这个,意义不大,直接用文泉驿微米黑就OK了
下载地址:http://www.zcool.com.cn/work/ZMjA0MDg0MDA=.html
这个字体是由庞门正道以及字游空间创意工作室联合制作的。
下载地址:http://www.dynacw.com.cn/news/news_detail.aspx?s=7
这个啥也不说了,搭不上话了。
我大致确定是免费可商用的大概就这些了,能力有限,欢迎补充,(如有错,请指出),另外,附上一些我不大确定的字体,据说是免费可商用的,但是我确定不了,慎重。
这些字体是在开源系统linux中找的,毕竟做开源的他们比我们更懂字体和法律!
香港參考宋体
台湾教育部标准字体
台大中文字体
草檀斋毛泽东字体
书体坊免费字体
战国楚简帛文字字体
*请认真填写需求信息,我们会在24小时内与您取得联系。