PingFangSC 字体前端

2026-09-09

前端项目，引入PingFang SC字体

在仿苹果官网"垃圾桶"时, 设计出的UI使用PingFang SC 字体,在网上查了很久,特记录.如果你有更好的方法,欢迎评论留言~ 实现原理,使用@font-face将字体下载在用户电脑中,然后font-family使用字体. 关于font-face链接 css: @font-face { font-family: 'myFont'; src: url('/assets/font/PingFangSC-Light.ttf'); //你的资源目录 font-weight: normal

前端组件库 - 搭建web app常用的样式/组件等收集列表(移动优先)

0. 前端自动化(Workflow) 前端构建工具 Webpack - module bundler Yeoman - a set of tools for automating development workflow gulp - The streaming build system use-gulp grunt - the JavaScript Task Runner F.I.S - 前端集成解决方案 Web Starter Kit - 一个Google 提供的帮助开发者快速设置项目的工具

WebFont-前端字体

WebFont-前端字体前端设计时使用了一些不常用的字体,如何在客户的浏览器中正确展示? 解决方案是使用webfont,将字体置于服务端,利用 css 中的font-family进行设置,客户端展现时加载到浏览器中. WebFont webfont一般使用 4 种格式,即 eot / svg / ttf / woff 1 首先需要定义字体: @font-face { font-family:'fzztjw'; src: url('../fonts/fzztjw-webfont.eot'); s

前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位

前端1-----CSS颜色属性,字体文本和背景属性,边框属性,margin和padding,盒模型,行内块转换,浮动,三大定位一丶css选择器的优先级行内 > id选择器 > 类选择器 > 标签选择器 > 继承 1000 100 10 1 0 # 所有的值可以累加,但不能进位 (同级别的数值可以累加) # 优先级如果相同,写在后面的生效二丶css的颜色表示 /*RGB表示法*/ rgb: red green blue /* 光谱三原色 */ rgb(255,255,255)

python 之前端开发（CSS三大特性、字体属性、文本属性、背景属性）

11.38 css三大特性 11.381 继承性 1.定义:给某一个元素设置一些属性,该元素的后代也可以使用,这个我们就称之为继承性2.注意: 1.只有以color.font-.text-.line-开头的属性才可以继承 2.a标签的文字颜色和下划线是不能继承别人的 3.h标签的文字大小是不能继承别人的,会改变,但是会在原来字体大小的基础上改变 ps:打开浏览器审查元素可以看到一些inherited from...的属性3.应用场景: 通常基于继承性统一设置网页的

【CSS简介、基础选择器、字体属性、文本属性、引入方式】前端小抄(2) - Pink老师自学笔记

[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面的. 1.1 HTML的局限性 HTML 只关注内容的语义,虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐-- 1.2 CSS网页的美容师 CSS 是层叠样式表的简称. 有时我们也会称之为 CSS 样式表或级联样式表. CSS 也是一种标记语言. CSS 主要用于设置 HT

Web 前端颜色值--字体--使用，整理整理

做网页时经常挑选不好颜色吧...多看看颜色值,或者自己配吧.... 颜色值 CSS 颜色使用组合了红绿蓝颜色值 (RGB) 的十六进制 (hex) 表示法进行定义.对光源进行设置的最低值可以是 0(十六进制 00).最高值是 255(十六进制 FF). 十六进制值使用三个双位数来编写,并以 # 符号开头. 下面是一些颜色值...不多不多...够用了... 颜色名十六进制颜色值颜色 Black #000000 Navy #000080 DarkBlue #00008B MediumBlue #

Web前端新人笔记之CSS字体

本章内容是阅读CSS权威指南的一个小积累和随笔.新人必看,老鸟也可查看并指出不足指出以便后人阅读更好地理解.O(∩_∩)O谢谢!!!设置字体属性时样式变的最常见的用途之一:不过,尽管字体选择很重要,但是目前还没有一种方法能确保在Web上一致的使用字体,因为没有一种统一描述字体和字体的变性方法:除了各种特定字体系列外(如 Times.Verdana.Helvetica或Arial),还定义了另外5中通用字体系列: 使用通用字体系列可以使用属性font-family在文档中采用上述任何字体系列使用

【27前端】字体图标 Font Face

设计师做的高保真原型图,难免会用到艺术字体. 采用切片的方式,简单,粗暴,节省时间.除了retina屏其它兼容性也是一流.但是在修改的时候,会花很大的力气.即使只是修改文字大小,也需要重新切图,更别说修改文字,或者改变文字颜色了. 有没有想过,文字本来就应该是它原本的样子.只是看起来像,似乎不和情理. 之所以不直接使用艺术字体,最大的一个问题就是字体文件,一般都太大了.轻轻松松就上兆的节奏.在网页这种流量寸土寸金的地方,真的是很难应用起来. 我们在一个网页上一般用到的艺术字体的地方,往往只有ba

在前端页面中使用@font-face来显示web自定义字体【转】

本文转自W3CPLUS 的<CSS @font-face> @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自然的问,这样的东西IE能支持吗?当我告诉大家@font-face这个功能早在IE4就支持了你肯定会感到惊讶.我的Blog就使用了许多这样的自定义Web字体,比如说首页的Logo,Tags以及页面中的手写英文体,很多朋友问我如何使

前端学习_04_font-awesome字体图标

使用font-awesome字体图标库 font-awesome是一个比较大的矢量图标库,包含大部分IT类公司logo和常用的一些小图标,通过使用font-awesome提供的css样式集,可以在网页上轻松地添加图标.由于使用的是字体图标,所以利用文本相关的标签引用,并且放大不会失真.但是和字体不一样的是,如果用标签或者标签等引用的时候,并不会有斜体或者粗体的效果,但是标签却有下划线的效果.在font-awesome官网上找到icon的名字,在引用的元

前端的UI设计与交互之字体篇

跨平台的字体设定,力求在各个操作系统下都有最佳展示效果.字体是界面设计中最重要的基本构成之一,用户通过文本来消化内容和完成工作,优雅的字体将大大提升用户的阅读体验及工作效率.在满足不同终端始终保持良好的阅读体验的同时,使页面的视觉层次更加清晰.使用时有以下三点需要注意:合理的使用不同的字重.字号和颜色来强调界面中最重要的信息:尽可能的使用单种字体,混合使用多种字体会让界面看起来零散和草率:遵循 WCAG 2.0 标准,字体在使用时与背景颜色的对比值满足无障碍阅读的最低标准. 一.字体家族优秀的字

前端基础-html 字体标签,排版标签,超链接,图片标签

主要内容: 字体标签: h1~h6...... 排版标签 <div> . . .<hr>.<center>.<pre> 超链接 <a> 图片标签 <img>  <!DO

前端学习 -- Css -- 字体的几个属性学习

font-style可以用来设置文字的斜体 - 可选值: normal,默认值,文字正常显示 italic 文字会以斜体显示 oblique 文字会以倾斜的效果显示 - 大部分浏览器都不会对倾斜和斜体做区分,也就是说我们设置italic和oblique它们的效果往往是一样的 - 一般我们只会使用italic font-weight可以用来设置文本的加粗效果可选值: normal,默认值,文字正常显示 bold,文字加粗显示该样式也可以指定100-900之间的9个值, 但是由于用户的计算机往往

前端学习 -- Css -- 字体分类

在网页中将字体分成5大类: serif(衬线字体) sans-serif(非衬线字体) monospace (等宽字体) cursive (草书字体) fantasy (虚幻字体) 可以将字体设置为这些大的分类,当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式. 一般会将字体的大分类,指定为font-family中的最后一个字体. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

前端学习 -- Css -- 字体

设置字体颜色,使用color来设置文字的颜色设置文字的大小,浏览器中一般默认的文字大小都是16pxfont-size设置的并不是文字本身的大小,在页面中,每个文字都是处在一个看不见的框中的我们设置的font-size实际上是设置格的高度,并不是字体的大小一般情况下文字都要比这个格要小一些,也有时会比格大,根据字体的不同,显示效果也不能. 通过font-family可以指定文字的字体当采用某种字体时,如果浏览器支持则使用该字体,如果字体不支持,则使用默认字体.该样式可以同时指定多个字体,多个字

前端-CSS-9-文本和字体-背景颜色

字体属性 div{ width: 300px; height: 100px; /*background-color: red;*/ border: 1px solid red; /*设置字体大小 px:像素 rem em %*/ font-size: 20px; font-weight: 700; font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif; text-align: ce

【前端开发】禁止微信内置浏览器调整字体大小的方法js

微信webview内置了调整字体大小的功能,用户可以根据实际情况进行调节.但是很多移动端页面的开发都是使用rem作为单位的,字体大小改变以后,会出现页面布局错乱的情况,因此希望能够禁止微信的字体放大功能,下面是通过查找资料找到的一些解决方法. 1.安卓手机禁止微信客户端修改字体大小 <script> (function() { if (typeof WeixinJSBridge == "objec

Android程序员学WEB前端(7)-CSS(2)-伪类字体文本背景边框-Sublime

转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76618373 觉得博文有用,请点赞,请评论,请关注,谢谢!~ 伪类: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

前端之CSS字体和文本类属性

一.字体类属性: 1.字体类型: font-family:字体1,字体2,字体3; 常用写法: font-family:"微软雅黑",Arial; 注:a) 多个字体之间用逗号分隔: b)中文字体要放在双引号中,英文字体由多个单词组成时也要加双引号: c) 浏览器优先识别字体1,如果找不到字体1,识别字体2,如果都找不到,显示浏览器默认字体. 2.字体大小: font-size:数值+单位; 注:a)浏览器默认字体大小为16px: b) font-size:medium;等价于 fon

PingFangSC 字体 前端

热门专题

PingFangSC 字体前端