微信小程序css篇----字体(Font)

一.字体:font。属性在一个声明中设置所有字体属性。

可设置的属性是(按顺序): "font-style font-variant font-weight font-size/line-height font-family".

font-size和font-family的值是必需的。如果缺少了其他值,默认值将被插入,如果有默认值的话.

1.font-style:文字样式。

取值:normal 正常的字体, italic   斜体字,   oblique  倾斜的字体。

2.font-weight:设置文本字体的粗细。取值范围为100-900.

取值:mormal:正常大小相当于400。bold :粗体,相当于700。bolder, lighter。

3.font-size:设置字体尺寸大小。

4.font-variant:设置对象中的文本是否为小型的大写字母。

取值:mormal 正常的字体。small-caps  小型的大写字母字体。设置了以后会不论原来是否为大小字母 全部改为大写。

5.font-family:设置字体名称。

6.font-stretch:设置对象中的文字是否横向拉伸变形。

取值:normal:正常文字宽度。

ultra-condensed:比正常文字宽度窄4个基数。

extra-condensed:比正常文字宽度窄3个基数。

condensed:比正常文字宽度窄2个基数。

semi-condensed:比正常文字宽度窄1个基数。

semi-expanded:比正常文字宽度宽1个基数。

expanded:比正常文字宽度宽2个基数.

extra-expanded:比正常文字宽度宽3个基数。

ultra-expanded:比正常文字宽度宽4个基数。

7.font-size-adjust:只有火狐支持。设置对象的 aspect 值,用以保持首选字体的 x-height。

如果 14px 的 Verdana(aspect 值是 0.58)不可用,但是某个可用的字体的 aspect 值是 0.46,

那么替代字体的尺寸将是 14 * (0.58/0.46) = 17.65px。

[email protected]:通过这个可以添加外部的字体。

原文地址:https://www.cnblogs.com/fanshaokun/p/8615281.html

时间: 2024-10-12 05:02:46

微信小程序css篇----字体(Font)的相关文章

如何在微信小程序中使用字体图标

微信小程序中,在image标签里,可以在src中引用本地文件,但是background设置背景图或者使用字体图标的时候,却不能引用本地文件,只能用url地址的图片或字体,或者使用base64编码后的格式,图片我们可以在线转换,随便搜一下,有很多在线转换工具,但是使用字体图标的时候,怎么转换呢?下面我们记录一下使用图标字体的l两个方法.    方法一:将字体url转换为base64的格式后使用 第一步,下载需要的字体图: 打开阿里巴巴矢量图标库,选择自己需要的图标添加到购物车,然后点击购物车下载代

微信小程序入门篇

微信小程序入门篇: 准备工作 IDE搭建 就不多说了,没有内测码去下载个破解版吧,我用了一下,学习完全够了!IDE破解版+安装教程 图片发自简书App 知识准备 JavaScrip还是要看看的,推荐教程 廖雪峰大神的博客 HTML+CSS 大概知道是干啥的就行 从零开始 微信小程序中就四种类型的文件 js ---------- JavaScrip文件 json -------- 项目配置文件,负责窗口颜色等等 wxml ------- 类似HTML文件 wxss ------- 类似CSS文件

我的微信小程序第二篇

在上一篇<我的微信小程序第一篇(入门)>中,很多人问我什么是微信小程序,在这里我要说一下这个是我的失误啦,我默认大家都知道微信小程序,其实可能行内人士都知道小程序,好多非行内朋友可能平时不太关注这些,所谓的隔行如隔山,所以,我今天简单介绍下什么是微信小程序? 据说在微信产品经理张小龙的微信朋友圈中介绍到(敲黑板,重点是“据说”噢,因为我没有张小龙微信,哈哈): 小程序是一种不用下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或者搜索一下即可打开,也体现了“用完即走”的理念,用

我的微信小程序第一篇(入门)

前言 微信小程序出来已经有一段时间了,已经有很多大牛都写过相关教程了,那么我为啥还要写这篇文章呢?其实仅仅是个人对微信开发的一个兴趣吧,觉得是个很有意思的事情,后面有时间可能会发更多关于小程序的文章,刚刚接触,如果哪里写的有问题欢迎大家指正. 准备工作 首先需要下载微信小程序开发者工具 点击链接: https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1455784140&token=&lang=zh_CN进入微信公众平台技术

微信小程序工具篇

"工欲善其事必先利其器",在开始新内容的学习之前,往往会对用哪个IDE开发而苦恼.因为自身硬件条件的限制(公司给配的商务笔记本,真心的是中看不中用.也就是便携这么个有点了).所以在选择IDE方面,个人比较追求,高效.快速.低耗的工具.综合网上各位大神的介绍及个人使用经验.对微信原生IDE,EgretWing,sublime text3 进行比较. 1.高效 以上三种IDE 均支持智能提醒.相对sublime text3 较弱.需要安装第三方插件(下载地址见底部).而且sublime t

微信小程序组件篇实战

实现效果如下: 实现代码如下: index.wxml: <!--index.wxml--> <view class="container"> <view class = "selection"> <swiper indicator-dots="true" autoplay="true" interval="3000" duration="1000"

微信小程序css画三角形内有文字

<view class="productStatus"> <span> <em>已上架</em> </span> </view> .productStatus { position: absolute; right: 0; top: 0; height: 1.81rem; width: 1.81rem; display: flex; align-items: center; } .productStatus spa

微信小程序使用字体图标

项目中常常需要使用到字体图标,微信小程序中使用字体图标与在平常的web前端中类似但是又有区别.下面以使用阿里图标为例子讲解如何在微信小程序中使用字体图标. 第一步:下载需要的字体图标 进入阿里图标官网http://iconfont.cn/搜索自己想要的图标,如这里需要一个购物车的图标,流程为: 搜索"购物车"图标--->点击"添加入库"-->点击购物车进入购物车-->点击下载代码按钮. 点击下载代码,将得到名为download.zip的压缩包,解压

微信小程序学习指南

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教