html字体 | 易学教程

@font-face的用法

阅读更多关于 @font-face的用法

下载一个字体文件。比如 font squirrel 网站。将文件保存在HTML和CSS文件相同的目录中。它们是TTF（真实字体）还是OTF（开放字体）并不重要。解压缩字体包。您可能会在包中找到多个字体文件，例如薄，中，粗，斜体，斜体等。生成多种字体。将下载好的字体文件转到Font squirrel Webfont Generator 来制作多种格式。使用“上载字体”按钮上传你下载的那个字体文件。选中标记为“是的，我正在上传的字体在网络嵌入方面具有合法资格”的复选框。然后单击下载您的ZIP文件 - 将其保存在与HTML和CSS相同的目录中。查看下载的文字zip文件。在解压缩的目录中，您将看到三个有用的项目：每种字体的多个版本。例如.ttf，.woff，.woff2等; 跨浏览器支持需要多种字体。每种字体的演示HTML文件。你可以在浏览器中加载这些文件，以查看字体在不同的使用环境中的外观。 stylesheet.css文件，其中包含您需要生成的@ font-face代码。复制代码到css。具体操作：将解压缩的文件夹重命名为fonts。打开stylesheet.css文件并将包含在其中的@ font-face复制到你的.css文件中，你需要将它们放在最前面，因为字体需要在网站运行之前导入。每个url（）函数都指向我们要导入CSS的字体文件，修改路径

css — 权重、继承性、排版、float

阅读更多关于 css — 权重、继承性、排版、float

目录 1. 继承性 2. css中的权重 3. 常用格式化排版 4. 浮动布局float 1. 继承性继承性：在css有某些属性是可以继承下来，如 color,text-xxx,line-height,font-xxx,letter-spacing,word-spacing是可以继承下来，但有些属性是不可以继承下来的，如 border:1px solid green; 2. css中的权重继承来的属性权重值约为0 权重比较规则: 如果选中了标签： 1.数选择器数量： id 类标签，谁大它的优先级越高，如果一样大，后面的会覆盖掉前面的属性 2.选中的标签的属性优先级用于大于继承来的属性，它们是没有可比性 3.同是继承来的属性 1.谁描述的近，谁的优先级越高 2.描述的一样近，这个时候才回归到数选择器的数量 !important 它设置当前属性的权重为无限大，大不过行内样式的优先级注意：!important要写在分号的前面使用!important是一个坏习惯，应该尽量避免，因为这严重破坏了样式表中固有的权值比较规则，使得在调试bug变得更加困难。 3. 常用格式化排版 3.1 字体属性 1.字体语法： /*网页中的文字设置字体为微软雅黑*/ body{font-family:"Microsoft Yahei"} 2.备选字体语法： body{font-family:

CSS3新特性应用之字体排印

阅读更多关于 CSS3新特性应用之字体排印

目录背景与边框第一部分背景与边框第二部分形状视觉效果字体排印用户体验结构与布局过渡与动画源码下载一、插入换行 ~：表示同辈元素之后指定类型的元素，如;elm1 ~ elm2表示,elm1之后的所有elm2元素，且elm1与elm2都是在同一个父级元素。：表示同辈元素的兄弟元素。 \A：一个空白换行符解决方案：在dd与dt相邻的dt上的子元素前面加入一个空白换行符在相邻的dd与dd之间，加入一个逗号示例代码： < head > < meta charset ="UTF-8" > < title > Document </ title > < style > dt, dd { display : inline ; } dd { font-weight : bold ; margin : 0px 0px 0px 5px ; } dd dt::before { content : '\A' ; white-space : pre ; /* html默认换行符与其相邻的其他空白符合并,pre表示不合并空白符 */ } dd dd::before { content : ',' ; margin-left : -5px ; } </ style > </ head > < body > < dt > Name </ dt >< dd > Sam Long </

移动端布局

阅读更多关于移动端布局

一. viewport 什么是viewport 简单来讲，viewport就是浏览器上，用来显示网页的那一部分区域了，也就是说，浏览器的实际宽度，是和我们手机的宽度不一样的，无论你的手机宽度是320px，还是640px，在手机浏览器内部的宽度，始终会是浏览器本身的viewport。如今的浏览器，都会给自己的本身提供一个viewport的默认值，可能是980px，或者是其他值。就以手机来说吧，目前，新版本的手机浏览器，绝大部分是以980px作为默认的viewport值的。我这里对新版本的不同平台下的浏览器做了测试，经过测试，iphone下的默认viewport为980px，安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。 viewport是用来干什么的 viewport的默认值，一般来说是大于手机屏幕的。这样就可以做到当我们在浏览桌面端网页的时候，可以让桌面端端网页正常显示（我们普通页面设计的时候，一般页面的主区域是以960px来做的，所以980px这个值，可以做到桌面端网页的正常显示）。但是，其实我们手机的屏幕宽度是没有960px的，因此浏览器会出现横向滚动条。同时，即使是基于980的viewport，我们在移动端浏览我们的桌面页面的体验其实也并不好，所以，一般的，我们会专门给浏览器设计一个移动端的页面。

前端工程师入门

阅读更多关于前端工程师入门

前端快速入门到高级工程师概述前端开发工程师是Web前端开发工程师的简称，2007年才真正开始受到重视的一个新兴职业。Web前端开发技术是一个先易后难的过程，主要包括三个要素： HTML （标准通用标记语言下的一个应用）、级联样式表和JavaScript。前端开发工程师不仅要掌握基本的Web前端开发技术，网站性能优化、SEO和服务器端的基础知识，而且要学会运用各种工具进行辅助开发以及理论层面的知识，包括代码的可维护性、组件的易用性、分层语义模板和浏览器分级支持等。 html(超文本标记语言) 什么是 HTML？ HTML 是用来描述网页的一种语言。 HTML 指的是超文本标记语言 ( H yper T ext M arkup L anguage) HTML 不是一种编程语言，而是一种标记语言 (markup language) 标记语言是一套标记标签 (markup tag) HTML 使用标记标签来描述网页 HTML 标签 HTML 标记标签通常被称为 HTML 标签 (HTML tag)。 HTML 标签是由尖括号包围的关键词，比如 HTML 标签通常是成对出现的，比如和标签对中的第一个标签是开始标签，第二个标签是结束标签开始和结束标签也被称为开放标签和闭合标签 html练习 css(级联样式表) CSS 概述 CSS

前端入门CSS(1)

阅读更多关于前端入门CSS(1)

day48 参考： https://www.cnblogs.com/liwenzhou/p/7999532.html CSS的几种引入方式行内样式行内式是在标记的style属性中设定CSS样式，不推荐大规模使用，作用范围小，优先级最高。 <p style="color: red">Hello world.</p> 内部样式嵌入式是将CSS样式集中写在网页的 <head></head> 标签对的<style></style>标签对中。格式如下： <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ background-color: #2b99ff; } </style> </head> 整个h3的颜色都被更改。外部样式外部样式就是将css写在一个单独的文件中，然后在页面进行引入即可。推荐使用此方式。 <link href="mystyle.css" rel="stylesheet"> CSS选择器基本选择器 1.元素选择器 2.ID选择器 3.类选择器 p(元素) #p2(ID) 尽量不要使用需要保证id的属性值具有唯一性 JavaScript: 对象document,方法getElementById("one")，标签变成了对象，只要找到就不找了。 .c1(类) 标签中的class属性如果有多个

Web开发（三）CSS

阅读更多关于 Web开发（三）CSS

概述基本概念层叠样式表（ Cascading Style Sheets ） , 负责网页三要素的表现 , 为网页创建样式表，通过样式表对网页进行装饰层叠：将网页想象成多层的结构，高层次的覆盖低层次， CSS 为各个层次设置样式样式表：各种样式的集合，如字体，颜色，背景，定位等样式语法样式表有一个一个样式构成，一个样式包括选择器和声明块选择器{ 样式名：样式值；样式名：样式值；样式名：样式值； } 选择器　　通过选择器可以选中指定的元素，并将声明块中的样式应用到选择器对应的元素声明块　　紧跟在选择器后面，用一对 { } 括起来　　在一个声明块中可以写多个声明，声明之间用分号 ; 隔开　　样式名和样式值用冒号：连接　　实际上就是一组一组的名值对结构注释　　/* 注释内容 */ 　　css 的注释只能写在 style 标签或 css文件中　　在 style 标签（style标签是head的子标签）中只能存放css代码内联元素、块元素使用原则一般使用块元素包含内联元素，而不使用内联元素去包含块元素 a标签可以包含任何元素（除了本身） p标签不可以包含任何块元素引入方式内联样式表将样式直接编写到元素的style属性中，不用填写选择器，直接编写声明即可内联样式只对当前元素的内容起作用内联样式属于结构与表现耦合，不方便后期维护，不推荐使用

CSS基础(1)

阅读更多关于 CSS基础(1)

1.CSS的发展历程随着HTML的成长,HTML本身自带了一些样式功能，这就导致了HTML越来越杂乱，HTML页面也越来越臃肿, 于是CSS便诞生了. 2.CSS介绍 CSS(Cascading Style Sheets) CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。简单来说一句话，就是用来给HTML标签设置外观样式的，让我们的HTML页面更加的丰富多彩. 3.css的书写位置(重点) 行内式就是写在标签内添加样式 <div style="color:red;font-size:130px;">今天开始学习CSS样式结构</div> 内嵌式在同一个页面的head标签的一对style标签内写样式页面结构比较简单 <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>内嵌样式的写法</title> <style type="text/css"> div { color

13-文本属性和字体属性

阅读更多关于 13-文本属性和字体属性

文本属性文本对齐 text-align规定元素中文本的水平对齐方式属性值：none、center、left、right、justify。文本颜色 color属性文本首行缩进 text-indent规定文本首行缩进的距离，单位建议使用em。文本修饰 text-decoration属性规定文本修饰的样式属性值：none(默认) | underline(下划线) | overline(定义文本上的一条线) | line-through (定义穿过文本下的一条线) | inherit(继承父元素的text-decoration属性的值。) 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>流浪者</title> 6 <style> 7 div{ 8 /* text-align: center; */ 9 color: green; 10 text-indent: 2em; 11 text-decoration: line-through; 12 } 13 </style> 14 15 </head> 16 <body> 17 18 <div

css学习

阅读更多关于 css学习

伪类： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css学习</title> <style> input:focus{ background: #0E5C2F; } </style> </head> <body>  <input type="text"> </body> </html> 伪元素使用： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css学习<

订阅 html字体