微信怎么设置字体样式

【www.shanpow.com--星座个性】

微信怎么设置字体样式篇一:微信如何发彩色的字体 微信彩色字体的设置方法

最近在跟朋友微信聊天，接受到朋友聊天记录文字都是相当个性的炫彩文字。开始以为朋友开通了微信会员啥的，但经过一问才知道，其实并不要开通啥会员。我们只需要在手机中安装彩色字体应用，然后进入微信中设置一下即可。下面小编就来将微信如何发彩色字体图文教程分享给大家，喜欢个性的童鞋，值得学习下。
方法如下：
一、首先在手机中安装“微信炫彩字”插件，该插件也被称为最好的安卓微信聊天插件，目前在各大手机应用市场均可以搜索下载，大家也可以在百度搜索“微信炫彩字”也可以找到下载。我们下载了，安装一下即可。
二、在安卓手机中安装了微信炫彩字插件之后，我们在进入手机微信，然后打开一个微信好友聊天窗口，我们点击一个加号图标，如下图所示：
三、这里点击+号工具进行添加，然后要找到下面显示的最后一项隐藏工具，因此这里需要在工具栏中，使用手指触摸往左拖动，找到最后一个“添加+”工具。
微信如何发彩色字体 信发彩色文字图文教程
四、然后在弹出的添加工具中，即可看到我们开始在手机中安装的“炫彩字”微信插件了，我们选择它，然后在接下来的操作中，选择“加到附件栏”中，如下图所示：
五、添加完成之后，我们再回到与微信聊天窗口当中，然后在输入文字的下方即可看到“炫彩字”工具了，我们点击进入，然后再输入文字，就可以打成彩色字体文字了，如下图：
 
微信炫彩字拥有多种漂亮样式，输入和选择样式完成后点击右上角的发送即可，之后还会返回到微信聊天界面，并且还可以将其“分享”给朋友，非常的实用。
相关阅读

微信怎么设置字体样式篇二:微信图文可以改字体了！（附详细操作步骤）

微信图文的字体，大家之前一直以为不能修改。那咱们先来看看下面两种字体，有什么不同。
i排版编辑器（iPaiban.com）是一款界面清新简约的图文编辑器，支持一键排版功能，全文编辑，实时预览，一键添加签名等功能。
i排版编辑器（iPaiban.com）是一款界面清新简约的图文编辑器，支持一键排版功能，全文编辑，实时预览，一键添加签名等功能。
Android和Windows Phone的小伙伴可以参考下图：
再放大几个字看看（为便于分辨，此处添加图片）：
是不是觉得右边的字体好文艺好特别，比左边的高大上了不知道几个档次？
沙师弟今天就教给大家一个修改字体的小技巧（装逼利器）。喜大普奔吧，小伙伴们！再也不用和外面那些妖艳的**撞字体了！
怎么操作
1. 进入i排版编辑器（iPaiban.com），建议使用Chrome或者QQ浏览器。
2. 在编辑页面输入一段文字，并点击 [HTML] 按钮：
3. 你会发现这段文字的代码是这样的：
接着，把下面的代码复制粘贴到第一行
<p style="font-family: Optima-Regular, PingFangTC-light">
变成这样：
这段代码中，font-family代表字体；Optima-Regular代表Optima 的标准字体，用以显示西文； PingFangTC-light代表PingFangTC 的细体，用以显示中文。
4. 点击 [HTML] 按钮，返回编辑器页面，接下来的文字直接输入就有特殊效果了。修改字体之后还是可以调整字号、字间距、字体颜色。建议大家调整字体时，仅限于不带样式的情况。
注 意：在手机预览时，这种字体改变只能在iPhone显示，Android或Windows Phone的用户看到的还是默认字体。
「深夜发媸」目前采用的就是这种特殊的字体效果。这种字体比较适合内容偏少女、时尚或情感主题。
其他字体呢
沙师弟经过测试，发现大部分中文字体显示没有明显的区别，英文字体可以看出区别，但是也仅限在iPhone显示的时候。为大家介绍几种英文字体，大家可以直接按照上文介绍的步骤粘贴代码。（为了方便Android小伙伴浏览，这里直接添加图片。）
Zapfino字体
代码：<p style="font-family: Zapfino">
Cochin-BoldItalic字体
代码：<p style="font-family: Cochin-BoldItalic">
MarkerFelt-Thin字体
代码：<p style=" font-family: MarkerFelt-Thin">
Futura-Medium字体
代码：<p style="font-family: Futura-Medium">
CourierNewPS-ItalicMT字体
代码：<p style="font-family: CourierNewPS-ItalicMT">
为什么会这样
（懒得看的小伙伴可以略过这一部分）
微信图文在读者面前最终呈现出的字体效果，并不取决于微信本身，而是取决于你的手机支持的字体规则。
Android 在修改字体代码后，发生调整的概率最小。一方面因为 Android 开源的原因，导致不同手机中的厂商系统千差万别，适配性不统一，另一方面 Google 为 Android 默认适配的几款中文字体本身视觉差异不大。所以更多时候，Android 用户会自己在手机里安装自己喜欢的字体，完全让界面内所有文字都自定义显示。
iOS 在修改字体代码后，字体几乎一定可以发生改变。iOS 的封闭操作系统使得大多数苹果用户的手机系统情况接近。在手机上，如上文你所看到的中文字体其实是「PingFangTC-light」的功劳，也就是「蘋方-繁 細體」的表现效果。而特别的西文字体则是「Optima-Regular」实现的效果。
这招是不是还挺不错的，赶紧安利给你身边做公众号的朋友吧！
你看，稍微懂点代码是不是对新媒体运营还挺有帮助的。

微信怎么设置字体样式篇三:微信小程序wxss设置样式

对于以前搞客户端开发的来说，有着客户端的逻辑，就是不知道怎么设置样式，把对应的控件显示出来
一、wxml
界面结构wxmL比较容易理解，主要是由八大类基础组件构成：
 

一、视图容器(View Container)：
二、基础内容(Basic Content)
组件名
说明
组件名
说明
view
视图容器
icon
 图标
scroll-view
可滚动视图容器
text
文字
swiper
可滑动的视图容器
progress
进度条
三、表单组件(Form)
四、操作反馈组件(Interaction)
组件名
说明
组件名
说明
button
按钮
action-sheet
上拉菜单
form
表单
modal
模态弹窗
input
输入框
progress
进度条
checkbox
多项选择器
toast
短通知
radio
单项选择器
五、导航(Navigation)
picker
列表选择器
组件名
说明
slider
滑动选择器
navigator
应用内跳转
switch
开关选择器
label
标签
六、多媒体(Media)
七、地图(Map)
组件名
说明
组件名
说明
audio
音频
map
地图
image
图片
video
视频
八、画布(Canvas)
组件名
说明
canvas
画布
 
关于这八大类的属性和具体用法可参考以下参考文献链接：
http://www.w3cschool.cn/weixinapp/itz51q8o.html
https://mp.weixin.qq.com/debug/wxadoc/dev/component/
二、wxss
wxml理解起来容易，但光搭好了框架，并不能达到我们想要的界面效果，这就需要用到wxss样式了。
wxss样式决定了组件应该如何显示，并在css的基础上做了一些功能扩展，主要包括：
1.尺寸单位
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。一般以iphone6屏幕做为视觉设计标准。
rpx 与 px单位换算如下：
 

设备
rpx换算px (屏幕宽度/750)
px换算rpx (750/屏幕宽度)
iPhone5
1rpx = 0.42px
1px = 2.34rpx
iPhone6
1rpx = 0.5px
1px = 2rpx
iPhone6s
1rpx = 0.552px
1px = 1.81rpx
 
2.样式导入
可以使用@import语句来导入外联样式表，其后面跟需要导入外联样式表的相对路径，并以分号结束。
例如：
/** other.wxss **/
.appText{
  margin:10px;
}
/** app.wxss **/
@import "other.wxss";
.content_text:{
  margin:15px;
}
app.wxss是全局样式，作用于每一个页面，而page下的每一个的wxss文件只作用于当前页面，并对全局样式中的相同属性会覆盖。
 
对于微信小程序wxss样式的使用来说，其实大部分都和css样式一致，下面简单的进行介绍一下：
 

wxss样式属性
一、wxss display(显示)
属性
说明
flex
多栏多列布局
flex-direction:row/column
inline-block
行内块元素
inline
此元素会被显示为内联元素，元素前后没有换行符
inline-table
作为内联表格来显示（类似 <table>），表格前后没有换行符
inline-flex
将对象作为内联块级弹性伸缩盒显示
none
此元素不会被显示
block
此元素将显示为块级元素，此元素前后会带有换行符
list-item
此元素会作为列表显示
table
会作为块级表格来显示（类似 <table>），表格前后带有换行符
table-caption
作为一个表格标题显示（类似 <caption>）
table-cell
作为一个表格单元格显示（类似 <td> 和 <th>）
table-column
作为一个单元格列显示（类似 <col>）
table-column-group
作为一个或多个列的分组来显示（类似 <colgroup>）
table-row
作为一个表格行显示（类似 <tr>）
table-row-group
作为一个或多个行的分组来显示（类似 <tbody>）
table-header-group
作为一个或多个行的分组来显示（类似 <thead>）
table-footer-group
作为一个或多个行的分组来显示（类似 <tfoot>）
inherit
从父元素继承 display 属性的值
flex:多栏多列布局 http://www.360doc.com/content/14/0811/01/2633_400926000.shtml
 
 

二、wxss position(定位)
属性
说明
absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
static
默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）
inherit
规定应该从父元素继承 position 属性的值
 
 

三、wxss float(浮动)
属性
说明
left
元素向左浮动
right
元素向右浮动
none默认值
元素不浮动，并会显示在其在文本中出现的位置。
inherit
规定应该从父元素继承 float 属性的值。
 
 

四、wxss background(背景)
属性
说明
语法(属性值)
background
简写属性，作用是将背景属性设置在一个声明中
background: color position size repeat origin clip attachment image;
background-color
指定要使用的背景颜色
background-position
指定背景图像的位置
background-position:center
background-size 
指定背景图片的大小
background-size:80px 60px;宽度 高度
background-repeat
指定如何重复背景图像
repeat,repeat-x,repeat-y,no-repeat,inherit
background-origin
指定背景图像的定位区域
padding-box 背景图像填充框的相对位置border-box 背景图像边界框的相对位置content-box 背景图像的相对位置的内容框
background-clip
指定背景图像的绘画区域
属性值，同上
background-attachment
设置背景图像是否固定或者随着页面的其余部分滚动。
scroll 背景图片随页面的其余部分滚动。这是默认fixed 背景图像是固定的inherit 指定background-attachment的设置应该从父元素继承local 背景图片随滚动元素滚动
background-image
指定要使用的一个或多个背景图像
url("URL") 图像的URLnone 无图像背景会显示。这是默认inherit 指定背景图像应该从父元素继承
 
 

五、wxss border(边框)
属性
说明
语法(属性值)
border
简写属性，用于把针对四个边的属性设置在一个声明
border:5px solid red;
border-width
用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度
border-top-width 上右下左边框厚度 属性值：thin medium thick length
border-style
设置元素所有边框的样式，或者单独地为各边设置边框样式。
border-top-width 上右下左边框样式 属性值：solid,dashed,dotted,double等
border-color
元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色
border-top-width 上右下左边框颜色
 
 

六、wxss 轮廓（outline）
属性
说明
语法(属性值)
outline
在一个声明中设置所有的外边框属性
outline: outline-color, outline-style, outline-width
outline-color
设置外边框的颜色
outline-style
设置外边框的样式。
属性值：solid,dashed,dotted,double等
outline-width
设置外边框的宽度
属性值：thin medium thick length
 
 

七、wxss 文本属性（text）
属性
说明
语法(属性值)
color
设置文本颜色
direction
设置文本方向。
ltr:文本方向从左到右;rtl:文本方向从右到左
letter-spacing
设置字符间距
line-height
设置行高
text-align
对齐元素中的文本
left：把文本排列到左边。默认值，由浏览器决定。right：把文本排列到右边。center：把文本排列到中间。justify：实现两端对齐文本效果。inherit: 规定应该从父元素继承 text-align 属性的值。
text-decoration
向文本添加修饰
underline 定义文本下的一条线。overline 定义文本上的一条线。line-through 定义穿过文本下的一条线。blink 定义闪烁的文本。
text-indent
缩进元素中文本的首行
text-shadow
设置文本阴影
text-shadow: h-shadow v-shadow blur color;h-shadow:水平阴影的位置,允许负值;v-shadow:垂直阴影的位置,允许负值;blur:模糊的距离;color:阴影的颜色
text-transform
控制元素中的字母
capitalize 文本中的每个单词以大写字母开头。uppercase 定义仅有大写字母。lowercase 定义无大写字母，仅有小写字母。
unicode-bidi
设置或返回文本是否被重写 
vertical-align
设置元素的垂直对齐
white-space
设置元素中空白的处理方式
word-spacing
设置字间距
 
 

八、wxss 字体属性（font）
属性
说明
语法(属性值)
font
在一个声明中设置所有字体属性
font:font-style font-variant font-weight font-size/line-height font-family(按顺序)
font-style
指定文本的字体样式
normal 默认值。浏览器显示一个标准的字体样式。italic 浏览器会显示一个斜体的字体样式。oblique 浏览器会显示一个倾斜的字体样式。inherit 规定应该从父元素继承字体样式。
font-variant
以小型大写字体或者正常字体显示文本
normal 默认值。浏览器会显示一个标准的字体。small-caps 浏览器会显示小型大写字母的字体。inherit 规定应该从父元素继承 font-variant 属性的值。
font-weight
指定字体的粗细
normal 默认值。定义标准的字符。bold 定义粗体字符。bolder 定义更粗的字符。lighter 定义更细的字符。inherit 规定应该从父元素继承字体的粗细。
font-size
指定文本的字体大小
smaller 把 font-size 设置为比父元素更小的尺寸。larger 把 font-size 设置为比父元素更大的尺寸。length 把 font-size 设置为一个固定的值。% 把 font-size 设置为基于父元素的一个百分比值。
font-family
指定文本的字体系列
 
 

九、wxss margin(外边距)（margin）
属性
说明
语法(属性值)
margin
在一个声明中设置所有外边距属性。
margin:10px 5px 15px 20px;(上边距，右边距，下边距，左边距)
margin-top
设置元素的上外边距。
margin-right
设置元素的右外边距。
margin-bottom
设置元素的下外边距。
margin-left
设置元素的左外边距
 
 

十、wxss padding(填充)（padding）
属性
说明
语法(属性值)
padding
使用缩写属性设置在一个声明中的所有填充属性
padding:10px 5px 15px 20px;(上填充，右填充，下填充，左填充)
padding-top
设置元素的顶部填充。
padding-right
设置元素的右部填充
padding-bottom
设置元素的底部填充
padding-left
设置元素的左部填充
 
 

十一、wxss 选择器
选择器
样例
样例描述
.class(类选择器)
.intro
选择所有拥有class="intro"的组件
#id(id选择器)
#firstname
选择拥有id="firstname"的组件
element
view
选择所有view组件
element, element
view checkbox
选择所有文档的view组件和所有的checkbox组件
::after
view::after
在view组件后边插入内容
::before
view::before
在view组件前边插入内容
 
 

本文来源：https://www.shanpow.com/xz/331291/