html字体

HTML与CSS学习基础总结

只谈情不闲聊 提交于 2020-01-14 01:55:13
HTML与CSS学习基础总结 先了解学习的知识点有哪些: HTML HTML指的是超文本标记语言(Hyper Text Markip Language),它不是一种编程语言而是一种标记语言,通过使用标签来描述网页。 CSS CSS (Cascading Style Sheets)是层叠样式表用来定义网页的显示效果。 可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果功能。 简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能。 JS JS 全称(javascript)中文是java脚本的意思 。 它的由来(在互联网刚兴起的时候,网络速度比较慢,而体验又是放在服务器端的,所以用户体验度非常差,为了了解这一难题,网景公司发明了livescript liverscript主要把表单验证功能从后台提升到了前端,因为不依赖网络,所以用户体验比较好。 但是由于知名度比较差,知道的人很少,后来由于sum公司的java语言一飞冲天,爆红编程世界,为了跟风,博取知名度,网景公司把livescript 改成javascript. 后来微软眼红网景公司的成就,就发明了jscript。但是正因为此,导致了js的标准不同,所以给个大浏览器厂家带来了很大的麻烦。 为了有一个统一的标准,js被提交到一个ecma组织,也正因为此,后来的js都是采用ecma标准

CSS—相对单位em

我与影子孤独终老i 提交于 2019-12-29 11:48:32
目录 一、概述 二、详解 三、注意事项 一、概述 em是一个相对长度单位,它的单位长度取决于当前元素行内文本的字体尺寸,如当前元素行内文本的字体尺寸未设置,则相对于浏览器的默认字体尺寸。em最初是指字母M的宽度,故名em,现指字符宽度的倍数,用法类似百分比,如:0.8em、1.2em、2em等。 em可以设置width、height、line-height、margin、padding、border等样式。在响应式和移动设计的大环境下,使用em能更方便快捷的一次性调整Web文档及其html元素的字体大小、宽度、高度、边距、边框等一系列属性,一般来说使用em作为单位比px更灵活。 二、详解 浏览器中的文本字体尺寸一般默认为16px,即默认情况下: 1em = 16px div { width: 10em; height: 10em; background-color: red; /* 10em = 10 * 16 = 160px */ } 尝试改变字体尺寸,如下所示。 div { width: 10em; height: 10em; background-color: red; font-size: 20px; /* 10em = 10 * 20 = 200px */ } 三、注意事项 继承 元素的字体尺寸默认会继承父标签的字体尺寸。 <style> div { font-size:

把图标做成字体

做~自己de王妃 提交于 2019-12-25 13:14:03
把图标做成一个字体,那么就可以随意改变颜色和大小了,还可以减少页面请求,准备以下图片 1、把图片转为SVG,可使用这个在线转换工具:http://cn.office-converter.com/SVG-to-PNG 2、提供制作 Icon Font 功能的网站 icomoon ,选择左上角:import icons 插入SVG图 3.选中需要导出的图标 4.点击底部导出和下载 5.在下载的文件里引入对应的文件测试: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="style.css"> <style> .ico1 { font-size: 200px; color: red; } .ico2 { font-size: 150px; color: blue; } .ico3 { font-size: 100px; color: #000; } </style> </head> <body> <span class="icon-QQ_20160626164944_jpg ico1"></span> <span class="icon-QQ_20160626164944_jpg ico2"></span>

CSS杂记

可紊 提交于 2019-12-25 12:32:10
没看 CSS ( Cascading Style Sheet )之前,一直以为 CSS 挺难的,在网页上看到的那些代码一点都不知道代表些什么,晚上花了几个小时看了一下,发现也不过如此,而且好像属于超级简单的那种。有这种感觉不知道 CSS 真的是这样还是由于我孤陋寡闻的缘故。 其实我感觉学 CSS 只要知道 CSS 的类型就够了,然后看到不认识的标签 google 一下就可以了。不过如果要自己设计还是要了解一些里面的具体内容。计算机学到现在,我越来越感觉不管是做软件还是弄网站,就像是在玩搭积木的游戏,先要了解你要做什么东西,就像孩子们的志愿,我要造长城还是搭一个竖型塔亦或只是键一个小木屋就够了,然后孩子们会根据手上的积木材料来决定怎么去搭建自己的梦想,就像是我们根据不同的语言功能去拼凑我们的软件。感觉知识的模式都是这样,高中学做数学题目我也有这个感觉,我很少用参考书,一般总是先看看书本,给我提供了多少的定理、公式等,然后碰到题目就去套,总有一个会是正确的。运用知识不就是套用自己的学到过的知识的过程吗?想到这里我很后悔小时候没有玩过搭积木的游戏了!记得那个时候我应该还不知道搭积木是什么东西吧,不知道从什么时候才开始知道有这个名词,就是感觉等自己很大以后才知道! 言归正传了, CSS 主要包括 3 种样式类型,即类选择器样式、 ID 选择器样式、重定义标记样式。 类选择器样式定义如下:

[转]关于UILabel UITextView UIWebView 行间距 文字排版

半世苍凉 提交于 2019-12-23 00:11:42
有时候可用 UIWebView 代替 UITextView,解决行间距问题 2011-12-10 — Unmi 我们在使用 UILabel 或是 UITextView 时,如果文字出现了换行,目前我还不知道如何去控制行间距,固定的 Label 文字 可以折成两个 Label 上下显示,但是对应大段显示的段落要多行显示时该如何呢,多行单独控制就变得不现实了。 由于 UILabel 或 UITextView 并不提供对行间距 line-height 的设置,要达成所愿指定行间距的方法,我可以想到三种方式: 1. 自定义相应的控件,在控件内部方法中去做文章,未实践,可能是个好方法 2. 修改字体,由于默认行间距是由字体本身特性决定的,所以可以修改字体来满足有限的需求,不是很现实 3. 用 UIWebView 来代替 UITextView,这是本文的思想 先看个图片,看看在使用某些字体时失控的行间距是什么样的效果: 说明:上图左边是用 UITextView 来显示一段文字,由于行间距不可控,不是我们想要的。右边就是用 UIWebView 来显示的同一段文它,它的行间距我们可以随意控制。 思才过程是这样的,对于 UITextView 多行文字显示时行间距不能直接用代码来设置,特别是对于某些字体来说行间距确有些夸张。然后首先想到的解决方式是创建自己的 UITextView 子类

CSS字体单位

£可爱£侵袭症+ 提交于 2019-12-21 19:10:41
【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 一、前言 在CSS样式中,当文本缩放的时候使用font-size属性是最难以理解的方面之一。在CSS中,你有4种不同的选择,能够让你设置文本在浏览器中的展示。那么这4种单位哪一种更适合呢?这个问题引发了各种各样不同的争论和评价。想要找到一个比较权威的回答可能比较困难,因为这个问题比较难回答。 PS: 半年前只翻译啦一半,半夜打开一看原文突然就想把剩下的翻译啦~里面有一些自己的观点描述,如果有错误请您留言给我,一定修正。 二、合适的单位 **"Ems"(em): ** "em"是被用于网页文件媒介的可缩放的单位(即相对单位)。1em就等于当前字体的大小,举个例子来讲,如果文档中字体的大小为12pt,那么1em = 12pt。Ems拥有能够缩放的特点,所以2em = 24pt,0.5em = 6pt(你也可以使用原文中的.5em,但是我觉得0.5em的可读性更好)等等。 **Pixels(px): ** 像素是被用于屏幕媒介(在计算机屏幕上读取)的固定大小的单位(即绝对单位)。1像素表示电脑屏幕中的1个点(这是你的屏幕能够识别的最小单位)。在设计网页的时候,很多web设计者采用像素,因为它能够很精确的在浏览器中渲染网页。但是,使用像素作为单位,当近视的用户(或者视力不好的用户

IcoMoon工具 svg图标转化为字符

我与影子孤独终老i 提交于 2019-12-21 00:00:27
1-2.打开 IcoMoon 载入下载好svg图标(如图所示) 3选择选择工具 4.点击成为白色-即为选中状态 5.生成图标文字 6点击下载文件 7.需要使用的文件 fonts文件和style.css 8.编辑html文档 给span标签加上css样式里面的class(icon-uniE900)引入css样式 9style.css 和载入字体一样在样式里添加文字的大小颜色但是字体必须是font-family: ‘icomoon’; 当然IcoMoon 里面也有现成的图标,可以直接使用:仅供参考! 来源: CSDN 作者: 张得武 链接: https://blog.csdn.net/zhangfan5211314/article/details/103627850

CSS font 复合属性的顺序

不羁岁月 提交于 2019-12-20 11:50:52
CSS 参考手册 实例 在一个声明中设置所有字体属性: p.ex1 { font:italic arial,sans-serif; } p.ex2 { font:italic bold 12px/20px arial,sans-serif; } 亲自试一试 浏览器支持 IE Firefox Chrome Safari Opera 所有浏览器都支持 font 属性。 注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。 定义和用法 font 简写属性在一个声明中设置所有字体属性。 注释:此属性也有第六个值:"line-height",可设置行间距。 说明 这个简写属性用于一次设置元素字体的两个或更多方面。使用 icon 等关键字可以适当地设置元素的字体,使之与用户计算机环境中的某个方面一致。注意,如果没有使用这些关键词,至少要指定字体大小和字体系列。 可以按顺序设置如下属性: font-style font-variant font-weight font-size/line-height font-family 可以不设置其中的某个值,比如 font:100% verdana; 也是允许的。未设置的属性会使用其默认值。 默认值: not specified 继承性: yes 版本: CSS1 JavaScript 语法:

HTML简介

ぃ、小莉子 提交于 2019-12-20 04:36:09
超文本标记语言, 标准通用标记语言 下的一个应用。是 网页制作必备的编程语言。超文本标记语言的结构包括“头”部分(英语:Head)、和“主体”部分(英语:Body),其中“头”部提供关于网页的信息,“主体”部分提供网页的 具体 内容。 由来 万维网 (world wide web)上的一个 超媒体 文档称之为一个 页面 ( 外语 :page)。作为一个组织或者个人在 万维网 上放置开始点的 页面 称为 主页 (外语:Homepage)或首页,主页中通常包括有指向其他相关页面或其他节点的 指针 ( 超级链接 ),所谓 超级链接 ,就是一种 统一资源定位器 (Uniform Resource Locator, 外语 缩写 : URL )指针,通过激活(点击)它,可使 浏览器 方便地获取新的网页。这也是HTML获得广泛应用的最重要的原因之一。在逻辑上将视为一个整体的一系列 页面 的有机集合称为 网站 ( Website 或Site)。超级文本标记语言(英文缩写:HTML)是为“ 网页 创建和其它可在 网页浏览器 中看到的信息”设计的一种 标记语言 。 网页的本质就是超级文本标记语言,通过结合使用其他的 Web技术 (如: 脚本语言 、 公共网关接口 、 组件 等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网( Web )编程的基础,也就是说 万维网 是建立在超文本基础之上的

再谈前端性能优化

最后都变了- 提交于 2019-12-20 00:16:04
好的设计应该简单,而且始终可以提供最佳性能。 一、优化原因 谷歌的数据表明,一个有10条数据0.4秒可以加载完的页面,在变成30条数据加载时间为0.9秒后,流量和广告收入减少了20%。当谷歌地图的首页文件大小从100kb减少到70~80kb时,流量在第一周涨了10%,接下来的三周涨了25%。 腾讯的前端工程师根据长期的数据监控也发现页面的一秒钟延迟会造成9.4%的PV的下降,8.3%跳出率的增加以及3.5%转化率的下降。 可以看出,性能优化商业上来说很重要。 但是,更重要的还是屏幕前我们的用户,让用户在使用产品时有更快更舒适的浏览体验,这算是一种前端工程师的自我修养。 二、优化目标 以让用户满意为目标呈现网页是终极的目标。当然页面速度要快,不过快只是构成满意的一个因素。 我们使用Google团队提出的RAIL模型作为优化的目标。 目前国内包括腾讯在内的团队都在使用这个评估方案。 Response:100ms内响应; Animation:10ms内生成一帧; Idle:最大程度增加空闲时间; Load:1000ms内呈现内容; 1)以用户为中心 User-centered 用户是性能优化的中心,一切性能优化皆是为了用户获得更佳的体验。 那么,我们的用户如何评价性能延迟: 0-16ms 用户可以感知每秒渲染 60 帧的平滑动画转场。也就是每帧 16 毫秒 留给应用大约 10