- 含义2
- 微机系统的字体font
- 含义1
- 文字的外在形式特征
- 外文名
- typeface
- 文字是
- 工具
- 种 类
- 8种以上
- 中文名
- 字体
- 功 能
- 语言的载体
-
2020-08-31 20:24:11
css字体加粗
At the dawn of the web you only had a handful of fonts you could choose from.
在网络诞生之初,您只有少数几种字体可以选择。
Thankfully today you can load any kind of font on your pages.
值得庆幸的是,今天您可以在页面上加载任何字体。
CSS has gained many nice capabilities over the years in regards to fonts.
多年来,CSS在字体方面获得了许多不错的功能。
The
font
property is the shorthand for a number of properties:font
属性是许多属性的简写:font-family
font-family
font-weight
font-weight
font-stretch
font-stretch
font-style
font-style
font-size
font-size
Let’s see each one of them and then we’ll cover
font
.让我们看看它们中的每一个,然后我们将介绍
font
。Then we’ll talk about how to load custom fonts, using
@import
or@font-face
, or by loading a font stylesheet.然后,我们将讨论如何使用
@import
或@font-face
或通过加载字体样式表来加载自定义字体。font-family
(font-family
)Sets the font family that the element will use.
设置元素将使用的字体系列 。
Why “family”? Because what we know as a font is actually composed of several sub-fonts. which provide all the style (bold, italic, light..) we need.
为什么是“家庭”? 因为我们所知道的字体实际上是由几个子字体组成的。 提供我们需要的所有样式(粗体,斜体,浅色..)。
Here’s an example from my Mac’s Font Book app - the Fira Code font family hosts several dedicated fonts underneath:
这是我Mac的Font Book应用程序中的一个示例-Fira Code字体家族在下面托管了几种专用字体:
This property lets you select a specific font, for example:
此属性使您可以选择特定的字体,例如:
body { font-family: Helvetica; }
You can set multiple values, so the second option will be used if the first cannot be used for some reason (if it’s not found on the machine, or the network connection to download the font failed, for example):
您可以设置多个值,因此,如果由于某种原因无法使用第一个选项(例如,在计算机上找不到该选项,或者下载字体的网络连接失败),则将使用第二个选项:
body { font-family: Helvetica, Arial; }
I used some specific fonts up to now, ones we call Web Safe Fonts, as they are pre-installed on different operating systems.
到目前为止,我使用了一些特定的字体,我们将其称为Web安全字体 ,因为它们已预先安装在不同的操作系统上。
We divide them in Serif, Sans-Serif, and Monospace fonts. Here’s a list of some of the most popular ones:
我们将它们分为Serif,Sans-Serif和Monospace字体。 以下是一些最受欢迎的列表:
Serif - Georgia - Palatino - Times New Roman - Times
Serif-乔治亚州-Palatino-时代New Roman-时代
Sans-Serif - Arial - Helvetica - Verdana - Geneva - Tahoma - Lucida Grande - Impact - Trebuchet MS - Arial Black
Sans-Serif -Arial-Helvetica-Verdana-日内瓦-Tahoma-Lucida Grande-冲击-Trebuchet MS-Arial Black
Monospace - Courier New - Courier - Lucida Console - Monaco
Monospace-快递-快递-Lucida Console-摩纳哥
You can use all of those as
font-family
properties, but they are not guaranteed to be there for every system. Others exist, too, with a varying level of support.您可以将所有这些都用作
font-family
属性,但不能保证它们在每个系统中都存在。 其他人也存在不同程度的支持。You can also use generic names:
您也可以使用通用名称:
sans-serif
a font without ligaturessans-serif
没有连字的字体serif
a font with ligaturesserif
字体带连字monospace
a font especially good for codemonospace
字体,特别适合代码cursive
used to simulate handwritten piecescursive
用于模拟手写作品fantasy
the name says it allfantasy
这个名字说明了一切
Those are typically used at the end of a
font-family
definition, to provide a fallback value in case nothing else can be applied:这些通常用于
font-family
定义的末尾,以提供备用值,以防万一无法应用其他任何方法:body { font-family: Helvetica, Arial, sans-serif; }
font-weight
(font-weight
)This property sets the width of a font. You can use those predefined values:
此属性设置字体的宽度。 您可以使用这些预定义的值:
- normal 正常
- bold 胆大
- bolder (relative to the parent element) 粗体(相对于父元素)
- lighter (relative to the parent element) 更轻(相对于父元素)
Or using the numeric keywords
或使用数字关键字
- 100 100
- 200 200
- 300 300
400, mapped to
normal
400,映射为
normal
- 500 500
- 600 600
700 mapped to
bold
700映射为
bold
- 800 800
- 900 900
where 100 is the lightest font, and 900 is the boldest.
其中100是最浅的字体,而900是最粗体。
Some of those numeric values might not map to a font, because that must be provided in the font family. When one is missing, CSS makes that number be at least as bold as the preceding one, so you might have numbers that point to the same font.
其中一些数字值可能无法映射到字体,因为必须在字体系列中提供该值。 如果缺少一个,CSS将使该数字至少与前一个数字一样大胆,因此您可能会有指向相同字体的数字。
font-stretch
(font-stretch
)Allows to choose a narrow or wide face of the font, if available.
允许选择字体的窄字体或宽字体(如果有)。
This is important: the font must be equipped with different faces.
这很重要:字体必须配备不同的字体。
Values allowed are, from narrower to wider:
允许的值从窄到宽:
ultra-condensed
ultra-condensed
extra-condensed
extra-condensed
condensed
condensed
semi-condensed
semi-condensed
normal
normal
semi-expanded
semi-expanded
expanded
expanded
extra-expanded
extra-expanded
ultra-expanded
ultra-expanded
font-style
(font-style
)Allows you to apply an italic style to a font:
允许您将斜体样式应用于字体:
p { font-style: italic; }
This property also allows the values
oblique
andnormal
. There is very little, if any, difference between usingitalic
andoblique
. The first is easier to me, as HTML already offers ani
element which means italic.此属性还允许值
oblique
和normal
。 很少有,如果有的话,使用之间的差异italic
和oblique
。 第一个对我来说比较容易,因为HTML已经提供了一个i
元素,它表示斜体。font-size
(font-size
)This property is used to determine the size of fonts.
此属性用于确定字体的大小。
You can pass 2 kinds of values:
您可以传递2种值:
a length value, like
px
,em
,rem
etc, or a percentage长度值,例如
px
,em
,rem
等,或百分比- a predefined value keyword 预定义的值关键字
In the second case, the values you can use are:
在第二种情况下,可以使用的值为:
- xx-small xx小
- x-small 小
- small 小
- medium 中
- large 大
- x-large x大
- xx-large xx大
- smaller (relative to the parent element) 较小(相对于父元素)
- larger (relative to the parent element) 更大(相对于父元素)
Usage:
用法:
p { font-size: 20px; } li { font-size: medium; }
font-variant
(font-variant
)This property was originally used to change the text to small caps, and it had just 3 valid values:
此属性最初用于将文本更改为小写,并且只有3个有效值:
normal
normal
inherit
inherit
small-caps
small-caps
Small caps means the text is rendered in “smaller caps” beside its uppercase letters.
小写大写表示文本以大写字母旁边的“小写大写”呈现。
font
(font
)The
font
property lets you apply different font properties in a single one, reducing the clutter.font
属性使您可以在一个字体中应用不同的字体属性,从而减少混乱。We must at least set 2 properties,
font-size
andfont-family
, the others are optional:我们必须至少设置2个属性,
font-size
和font-family
,其他属性是可选的:body { font: 20px Helvetica; }
If we add other properties, they need to be put in the correct order.
如果我们添加其他属性,则需要以正确的顺序放置它们。
This is the order:
这是命令:
font: <font-stretch> <font-style> <font-variant> <font-weight> <font-size> <line-height> <font-family>;
Example:
例:
body { font: italic bold 20px Helvetica; } section { font: small-caps bold 20px Helvetica; }
使用
@font-face
加载自定义字体 (Loading custom fonts using@font-face
)@font-face
lets you add a new font family name, and map it to a file that holds a font.@font-face
允许您添加新的字体系列名称,并将其映射到包含字体的文件。This font will be downloaded by the browser and used in the page, and it’s been such a fundamental change to typography on the web - we can now use any font we want.
该字体将由浏览器下载并在页面中使用,这是对网络排版的根本改变-我们现在可以使用所需的任何字体。
We can add
@font-face
declarations directly into our CSS, or link to a CSS dedicated to importing the font.我们可以将
@font-face
声明直接添加到我们CSS中,或链接到专用于导入字体CSS。In our CSS file we can also use
@import
to load that CSS file.在我们CSS文件中,我们还可以使用
@import
加载该CSS文件。A
@font-face
declaration contains several properties we use to define the font, includingsrc
, the URI (one or more URIs) to the font. This follows the same-origin policy, which means fonts can only be downloaded form the current origin (domain + port + protocol).@font-face
声明包含一些用于定义字体的属性,包括src
,字体的URI(一个或多个URI)。 这遵循同源策略,这意味着只能从当前源(域+端口+协议)下载字体。Fonts are usually in the formats
字体通常采用以下格式
woff
(Web Open Font Format)woff
(Web开放字体格式)woff2
(Web Open Font Format 2.0)woff2
(网络开放字体格式2.0)eot
(Embedded Open Type)eot
(嵌入式开放式)otf
(OpenType Font)otf
(OpenType字体)ttf
(TrueType Font)ttf
(TrueType字体)
The following properties allow us to define the properties to the font we are going to load, as we saw above:
如下所示,以下属性使我们能够定义将要加载的字体的属性:
font-family
font-family
font-weight
font-weight
font-style
font-style
font-stretch
font-stretch
性能说明 (A note on performance)
Of course loading a font has performance implications which you must consider when creating the design of your page.
当然,加载字体会影响性能,在创建页面设计时必须考虑这些影响。
css字体加粗
更多相关内容 -
Windows 10原版字体(全部)
2018-12-12 12:03:54Windows 10原版字体(全部),直接全选安装,或者复制到 C:\Windows\Fonts 目录下。 1809版本提取。仅用于Windows 10系统,其他系统请勿替换。否则可能发生字体模糊。 -
Dejavu Sans Mono字体(编程字体,内附四种字体)
2014-07-28 17:48:53Dejavu Sans Mono为等宽字体,10个最佳编程字体中有过介绍。 这种字体平滑,看起来有点圆,很可爱,在IntelliJ Idea Linux版本中为默认首选字体。 此资源包含四种字体: - DejaVuSansMono.ttf: 常规字体 - ... -
字体提取工具
2015-06-19 15:15:59TTF字体精简,从TTF字体中提取想要的文字,详情见: http://blog.csdn.net/ldpjay/article/details/46561031 -
pycharm自用主题+字体
2016-07-28 20:30:14使用方法: 将.icls放置在cofig/colors 如C:\Users\hp\.PyCharm2016.1\config\colors中之后即可在pycharm的setting/Colors&Fonts中更换。 setting.jar为我整个pycharm的配置,各位可自行选择导入。... -
Lucida Console 字体 (编程字体 内附Lucida Sans)
2014-07-29 11:40:56曾经有个段子说的是,一眼能认出黑客的原因就是因为对方在使用黑屏荧光字加Lucida Console 其实这正说明了Lucida Console在终端使用的受欢迎程度。 Lucida Console也是英文版...字体间距微紧凑,字体圆滑,略“扁” -
桥梁通的字体
2014-09-14 19:27:28该文件有桥梁通的通用字体:FSTQLT.shx、HZQLT.shx、HZXTE_qlt.shx、KTQLT.shx、STQLT.shx。一般要把这些字体放在cad的Fonts文件夹中,缺什么就补什么,最好是把它们都复制到Fonts中,以备不时之需。 -
新版财税平台OCR A Extended 字体下载
2015-11-07 12:44:52解决新版财税平台中打印发票时提示:“当前操作系统缺少ocr a extended等字体,请及时安装所需字体或者重新安装正版操作系统软件” OCR A Extended 下载 如何安装你下载的字体: 首先解压你下载的RAR打包字体: Win ... -
Edlo字体 (编程字体)
2014-07-30 14:38:38字体作者很喜欢Aurulent Sans这款字体,为了明显区别0,o,O等字符而创作的这款。 这款字体的g十分有特点,很复古的感觉。另外这是为数不多0中间不是斜线而是点的字体 (是不是很怀旧?) --------------- 这款字体很... -
pingfang字体下载
2015-10-15 01:21:30ios9之后苹果官方提供的最新中文字体,pingfang -
Hermit字体 (编程字体)
2014-07-30 14:31:50这款字体的fk很俏皮,ij上的点异于其他字体,有点点大,感觉萌萌哒。我认为这是一款最接近手写版(handwriting系列)的等宽字体。 每天码代码已经很辛苦了,给自己的视觉上来一点调皮的感觉吧。 字库源码: ... -
中国农业银行字体通用字体
2013-01-02 16:30:17字体名称:中国农业银行字体通用字体 字体编号:YiMing-NongHangx 试用字体:包含0、2、5三个数字 正式字体:包含全部字体,并提供对账单制作方法 试用版下载地址: 需要正式版的请联系客服QQ:1982228465 -
pointfree字体 (编程字体) (手写等宽字体)
2014-07-30 14:46:19虽然这个字体有点粗,在IDE或Editor中使用并不是最佳选择,但是在PPT或者文档中作为等宽字体的标识,还是很有特点的。 当然作为编程字体,0oO的区别是必须有的。 ------ 详情: ... -
menlo+monaco+consola+ubuntuMono四种字体
2015-11-25 21:35:26menlo+monaco+consola+ubuntuMono四种字体,做android开发时一个好看的字体有时也能启发思维 -
Consolas.ttf (Consolas字体,编程字体)
2013-09-16 14:32:32特别是在windows的命令行(CMD)中使用(是的,你没看错,cmd也可以自定义字体)。 Monaco在cmd中略显粗笨,Consolas则相对字符间距都很合适。 完美识别0,o;1,l,i。 -------------- 虽然Consolas为windows自带... -
chrome浏览器字体编码插件下载
2017-03-15 17:43:26由于新版chrome浏览器(77以下版本)不能设置字体编码,我找了一个插件和大家一起分享,插件安装的方式自行搜索。 高版本请移步 https://download.csdn.net/download/King_flag/11998490 如果没有积分,请加群... -
TTF字体各种字体
2011-09-10 01:33:16TTF字体.....~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -
微软雅黑字体精简版 仅1.7Mb
2014-12-18 10:59:38所有开发移动平台游戏必备的字体资源,微软雅黑字体精简版,仅1.7Mb,有效减小包大小。必备啊! -
Lato字体10种
2014-03-13 16:28:51Lato字体10种常用的分享给大家,欢迎大家试用。 -
禹卫书法行书简体yuweij字体下载
2014-08-12 09:40:04禹卫书法行书简体yuweij字体下载 -
48款个性毛笔英文字体+11款英文书法字体
2013-06-18 11:27:0148款个性毛笔英文字体+11款英文书法字体 --------- 找的不容易,特此备份。 -
南方cass字体库
2013-08-11 11:14:56cass字体库。解决cad无法读取cass图的问题 ,直接粘贴在cad字体库即可 -
simsun.ttf 宋体ttf字体
2015-08-18 12:44:18linux 可用的宋体,可以在suse下使用,这样activiti画图就没有乱码 -
Unity字体替换
2022-03-15 19:44:401、原文链接(指定文件路径下所有的预制体的字体被替换):Unity编辑器拓展之十四:字体替换工具_静风霁的博客-CSDN博客_unity 字体替换 using System.Collections; using System.Collections.Generic; using ...前面的两个是在网上找的,属于编译器扩展的工具:
1、原文链接(指定文件路径下所有的预制体的字体被替换):Unity编辑器拓展之十四:字体替换工具_静风霁的博客-CSDN博客_unity 字体替换
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEditor; using System.IO; using UnityEngine.UI; public class ReplaceFont : EditorWindow { private static ReplaceFont window = null; private static List<string> prefafbPathList = new List<string>(); private static Font targetFont; private static Font curFont; private static float fontSizeRatio = 1f; private static bool isUGUI = true; [MenuItem("Tools/替换字体")] public static void CSVCode() { if (window == null) window = EditorWindow.GetWindow(typeof(ReplaceFont)) as ReplaceFont; GetFiles(new DirectoryInfo(Application.dataPath), "*.prefab", ref prefafbPathList); window.titleContent = new GUIContent("ReplaceFont"); window.Show(); } public static void GetFiles(DirectoryInfo directory, string pattern, ref List<string> fileList) { if (directory != null && directory.Exists && !string.IsNullOrEmpty(pattern)) { try { foreach (FileInfo info in directory.GetFiles(pattern)) { string path = info.FullName.ToString(); fileList.Add(path.Substring (path.IndexOf ("Assets"))); } } catch (System.Exception) { throw; } foreach (DirectoryInfo info in directory.GetDirectories()) { GetFiles(info, pattern, ref fileList); } } } void OnGUI() { EditorGUILayout.BeginHorizontal(); isUGUI = EditorGUILayout.Toggle("UGUI",isUGUI); isUGUI = EditorGUILayout.Toggle("NGUI", !isUGUI); EditorGUILayout.EndHorizontal(); curFont = (Font) EditorGUILayout.ObjectField("被替换字体", curFont, typeof(Font), true); targetFont = (Font) EditorGUILayout.ObjectField("目标字体", targetFont, typeof(Font), true); EditorGUILayout.BeginHorizontal(); EditorGUILayout.LabelField("字号比例:"); fontSizeRatio = EditorGUILayout.FloatField(fontSizeRatio); EditorGUILayout.EndHorizontal(); if(GUILayout.Button("一键替换")) { for (int i = 0; i<prefafbPathList.Count; i++) { GameObject gameObj = AssetDatabase.LoadAssetAtPath<GameObject>(prefafbPathList[i]); Change(gameObj); } AssetDatabase.SaveAssets(); } } public static void Change(GameObject prefab) { if(null != prefab) { Component[] labels = null; if(isUGUI) { labels = prefab.GetComponentsInChildren<Text>(true); } else { //labels = prefab.GetComponentsInChildren<UILabel>(true); } if(null != labels) foreach (Object item in labels) { if(isUGUI) { Text text = (Text)item; int newFontSize = (int)(text.fontSize * fontSizeRatio); if (text.font.name == curFont.name) { text.font = targetFont; text.fontSize = newFontSize; } } else { // UILabel label = (UILabel)item; // int newFontSize = (int)(label.fontSize * fontSizeRatio); // if (label.trueTypeFont.name == curFont.name) // { // label.trueTypeFont = targetFont; // label.fontSize = newFontSize; // } } EditorUtility.SetDirty(item); } } } }
2、原文链接(这里是选中的预制体下所有的字体被替换):Unity一键修改NGUI字体的编辑器脚本_玛~的博客-CSDN博客
using UnityEngine; using UnityEditor; /// <summary> /// 根据鼠标点中的对象批量修改所有UI字体脚本,脚本位于Editor文件夹 /// </summary> public class ChangeFontWindow : EditorWindow { //是否改变当前字体 private static bool isChangFont = false; //当前字体 private static Font curFont; //是否改变字体类型 private static bool isChangeStyle = false; //字体类型 private static FontStyle curFontStyle; //是否增加字体大小 private static bool isExpandSize = false; //字体大小增加的值 private static int fontSizeDelta = 0; //window菜单下 [MenuItem("Window/Change Font")] private static void ShowWindow() { ChangeFontWindow cw = GetWindow<ChangeFontWindow>(true, "修改字体"); //(强迫症,看着舒服) cw.minSize = new Vector2(310, 200); cw.maxSize = new Vector2(310, 300); } private void OnGUI() { //向下空出5个像素 GUILayout.Space(5); //创建是否改变当前字体开关 isChangFont = EditorGUILayout.Toggle("是否改变当前字体", isChangFont); GUILayout.Space(5); //如果改变当前字体则创建字体文件选择框 if(isChangFont) { curFont = (Font)EditorGUILayout.ObjectField("目标字体", curFont, typeof(Font), true); GUILayout.Space(5); } //创建是否改变字体类型开关 isChangeStyle = EditorGUILayout.Toggle("是否改变字体类型", isChangeStyle); GUILayout.Space(5); //如果改变,则创建字体类型的枚举下拉框 if(isChangeStyle) { curFontStyle = (FontStyle)EditorGUILayout.EnumPopup("字体类型", curFontStyle); GUILayout.Space(5); } //创建是否增加字体大小的开关 isExpandSize = EditorGUILayout.Toggle("是否增加字体大小", isExpandSize); GUILayout.Space(5); //如果增加字体大小则创建增加字体大小值的滑条 if(isExpandSize) { fontSizeDelta = (int)EditorGUILayout.Slider("增加字体大小的值", fontSizeDelta, -200, 200); GUILayout.Space(5); } //创建确认按钮 if(GUILayout.Button("确认修改", GUILayout.Height(30), GUILayout.Width(300))) { Change(); } } public static void Change() { //如果鼠标没有选中物体则返回 if(Selection.objects == null || Selection.objects.Length == 0) { return; } //获取点中对象(包括子目录)所有UILabel组件 Object[] labels = Selection.GetFiltered(typeof(UILabel), SelectionMode.Deep); //赋值 foreach(Object item in labels) { UILabel label = (UILabel)item; if(isChangFont) { label.trueTypeFont = curFont; } if(isChangeStyle) { label.fontStyle = curFontStyle; } if(isExpandSize) { label.fontSize += fontSizeDelta; } EditorUtility.SetDirty(item); //重要(有点像应用设置的意思) } } }
----------------------------------------------------------------------------------------------------------
我是在NGUI下替换字体,如果使用上述功能替换会修改到预制体。所以建一个空的预制体,挂载上脚本NGUIFont.cs文件。FontType选择Dynamic,TTF Font下是要使用的字体。如图:
任何时候需要换字体集时,直接替换TTF Font的字体集就可以了。
在NGUI Label上挂载字体集的预制体就可以了。
-
TTF字体库裁剪&TTC转TTF字体工具
2013-03-23 16:32:28可以对TTF字体库进行裁剪,保留自己需要的部分字符,从而大大减小字库的大小,适合移动开发。同时支持TTC格式转TTF格式。 -
高速发票小票打印字体
2013-09-15 21:35:28实用字体,专用特殊字体,再也不怕找不到字体而犯愁 -
LaTeX的字体设置
2022-02-02 16:48:35文章目录字体族设置字体系列设置字体形状中文字体字体大小中文字号 字体属性 在LaTeX中,一个字体有5种属性。 字体编码 正文字体编码:OT1、T1、EU1等 数学字体编码:OML、OMS、OMX等 字体族 罗马字体:笔画...LaTeX的字体设置
字体属性
在LaTeX中,一个字体有5种属性。
- 字体编码
- 正文字体编码:OT1、T1、EU1等
- 数学字体编码:OML、OMS、OMX等
- 字体族
- 罗马字体:笔画起始处有装饰
- 无衬线字体:笔画起始处无装饰
- 打字机字体:每个字符宽度相同,又称等宽字体
- 字体系列
- 粗细
- 宽度
- 字体形状
- 直立
- 斜体
- 伪斜体
- 小型大写
- 字体大小
字体族设置
通过
textrm
命令来设置字体族。(1)可以设置为“罗马字体”—> Roman Family
当然,我们也可以用
rmfamily
这样的字体声明来声明后续的字体为罗马字体。(2)同样可以写“无衬线字体”和“打字机字体”
运行结果:
总结
我们可以使用字体命令(如\textrm),作用于命令参数。
还可以使用字体声明(如\rmfamily),作用于后续的文本。
(3)用大括号可以将字体进行分组,从而限定字体声明的作用范围。
比如我们让之后全部变为“无衬线字体”。
看一下结果:
当遇到另一个字体声明命令时,会结束当前字体声明而启用新的字体声明。
看一下结果:
可以利用大括号进行分组,以限定声明作用的范围。
看一下结果:
字体系列设置
看一下结果:
字体形状
看一下结果:
中文字体
看一下结果:
注:
\quad
表示空格。对于中文,我们也可以使用“粗体”和“斜体”命令。
看一下结果:
注意观察,“粗体”是用“黑体”表示的,“斜体”是用“楷书”表示的。
字体大小
看一下结果:
字体的大小是通过一系列声明实现的。
这些声明是与normalsize相对的大小。而normalsize大小是由文档类参数控制的。
文档类参数是一个可选参数。可以在方括号中进行添加。
比如,设置normalsize的大小为10磅。(一般只有10/11/12磅)
看一下结果:
中文字号
对于中文,CTex宏包还设置了一个字号命令。
用于设置中文字体的大小。
参数-0表示“小初号”。
看一下结果:
关于这些命令,我们可以打开dos命令窗口,输入
texdoc ctex
打开CTex帮助文件来查阅相关细节。注
LaTeX思想是格式与内容的分离。
因此,不建议在文档中使用大量命令,而是用
newcommand
命令定义一个新的命令,以执行相关操作。比如,定义一个“myfont”命令。
在正文中,利用刚才定义的“myfont”命令来进行字体设置。
查看结果:
但我们需要修改字体时,只需要修改定义的命令就可以了。
比如,我们取消斜体。注意大括号的配对!
查看结果:
附上代码:
%导言区 \documentclass[10pt]{article} \usepackage{ctex} \newcommand{\myfont}{\textbf{\textsf{Fancy Text}}} %正文区(文稿区) \begin{document} %字体族设置(罗马字体、无衬线字体、打字机字体) \textrm{Roman Family} \textsf{Sans Serif Family} \texttt{Typewriter Family} \rmfamily Roman Family {\sffamily Sans Serif Family} {\ttfamily Typewriter Family} {\sffamily who you are? you find self on everyone around.take you as the same as others!} {\ttfamily Are you wiser than others?definitely no. in some ways,may it is true.} %字体系列设置(粗细、宽度) textmd{Medium Series} \textbf{Boldface Series} {\mdseries Medium Series} {\bfseries Boldface Series} %字体形状(直立、斜体、伪斜体、小型大写) \textup{Upright Shape} \textit{Italic Shape} \textsl{Slanted Shape} \textsc{Small Caps Shape} {\upshape Upright Shape} {\itshape Italic Shape} {\slshape Slanted Shape} {\scshape Small Caps Shape} %中文字体 {\songti 宋体} \quad{\heiti 黑体} \quad{\fangsong 仿宋} \quad{\kaishu 楷书} 中文字体的\textbf{粗体}\textit{斜体} %字体大小 {\tiny hello} \\ {\scriptsize hello} \\ {\footnotesize hello} \\ {\small hello} \\ {\normalsize hello} \\ {\large hello} \\ {\Large hello} \\ {\LARGE hello} \\ {\huge hello} \\ {\Huge hello} \\ %中文字号设置命令 \zihao{-0} 你好! \myfont \end{document}
对于用
newcommand
定义新命令的细节,我们以后再详细讲解! - 字体编码
-
EOTFast(很好用的字体转换工具)
2013-09-09 08:27:21之前找这个软件找的挺辛苦,估计很多人也找不到,所以干脆免费共享,有需要的就拿去用吧,用法很简单,直接把ttf格式的字体拖到下载的exe文件里,就会自动生成eot文件了 -
Flutter 上字体的另类玩法:FontFeature
2022-03-24 23:07:55在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中,已经介绍了很多 Flutter 上关于字体有趣的知识点,而本篇讲继续介绍 Flutter 上关于 Text 的一个属性:...在以前的 《Flutter 上默认的文本和字体知识点》 和 《带你深入理解 Flutter 中的字体“冷”知识》 中,已经介绍了很多 Flutter 上关于字体有趣的知识点,而本篇讲继续介绍 Flutter 上关于
Text
的一个属性:FontFeature
, 事实上相较于 Flutter ,本篇内容可能和前端或者设计关系更密切。相信本篇绝对是你能看到关于 Flutter
FontFeature
相关的少数资料之一。什么是
FontFeature
? 简单来说就是影响字体形状的一个属性 ,在前端的对应领域里应该是font-feature-settings
,它有别于FontFamily
,是用于指定字体内字的形状的一个参数。如下图所示是
frac
分数和tnum
表格数字的对比渲染效果,这种效果可以在不增加字体库时实现特殊的渲染,另外Feature
也有特征的意思,所以也可以理解为字体特征。我们知道 Flutter 默认在 Android 上使用的是
Roboto
字体,而在 iOS 上使用的是SF
字体,但是其实Roboto
字体也是分很多类型的,比如你去查阅手机的system/fonts
目录,就会发现很多带有Roboto
字样的字体库存在。所以
Roboto
之类的字体库是一个很大的字体集,不同的font-weight
其实对应着不同的ttf
,例如默认情况下的Roboto
是不支持font-weight
为 600 的配置:所以如下图所示,如果我们设置了
w400
-w700
的weight
,可以很明显看到中间的 500 和 600 其实是一样的粗细,所以在设置weight
或者设计 UI 时,就需要考虑不同平台上的weight
是否支持想要的效果。回归到
FontFeature
上,那Roboto
自己默认支持多少种 features 呢? 答案是 26 种,它们的编码如下所示,运行后效果也如下图所示,从日常使用上看,这 26 种 Feature 基本满足开发的大部分需求。“c2sc”、 “ccmp”、 “dlig”、 “dnom”、 “frac”、 “liga”、 “lnum”、 “locl”、 “numr”、 “onum”、 “pnum”、 “salt”、 “smcp”、 “ss01”、 “ss02”、 “ss03”、 “ss04”、 “ss05”、 “ss06”、 “ss07”、 “tnum”、 “unic”、 “cpsp”、 “kern”、 “mark”、 “mkmk”
而 iOS 上的
SF pro
默认支持 39 种 Features , 它们的编码如下所示,运行后效果也如下图所示,可以看到SF pro
支持的 Features 更多。“c2sc”、 “calt”、 “case”、 “ccmp”、 “cv01”、 “cv02”、 “cv03”、 “cv04”、 “cv05”、 “cv06”、 “cv07”、 “cv08”、 “cv09”、 “cv10”、 “dnom”、 “frac”、 “liga”、 “locl”、 “numr”、 “pnum”、 “smcp”、 “ss01”、 “ss02”、 “ss03”、 “ss05”、 “ss06”、 “ss07”、 “ss08”、 “ss09”、 “ss12”、 “ss13”、 “ss14”、 “ss15”、 “ss16”、 “ss17”、 “subs”、 “sups”、 “tnum”、 “kern”
所以可以看到,并不是所有字体支持的 Features 都是一样的,比如 iOS 上支持
sups
上标显示和subs
下标显示,但是 Android 上的 Roboto 并不支持,甚至很多第三方字体其实并不支持 Features 。同样在 Web 上也存在各种限制,比如
swsh
(花体)默认下基本不支持浏览器,fwid
、nlck
不支持 Safari 浏览器等。有趣的是,在 Flutter Web 有一个渲染文本时会变模糊的问题#58159,这个问题目前官方还没有修复,但是你可以通过给
Text
设置任意FontFeatures
来解决这个问题。因为出现模糊的情况一般都是因为使用了
canvas
标签绘制文本,而如果Text
控件具有fontFeatures
时,就会被设置为<p>
+<span>
进行渲染,从而避免问题。最后,如果对 FontFeature 还感兴趣的朋友,可以通过一下资料深入了解,如果你还有什么关于字体上的问题,欢迎留言讨论。
-
如果你想了解更多的 features 类型,可以通过 https://en.wikipedia.org/wiki/List_of_typographic_features 了解更多;
-
如果你对自己的使用的字体支持什么 features 感兴趣,可以通过 https://wakamaifondue.com 了解更多;
补充内容
基于网友的问题再补充一下拓展知识,毕竟这方面内容也不多。
事实上在 dart 里就可以看到对应
FontWeight
约定俗称用的是字体集里的什么字体:名称 值 Thin w100 Extra w200 Light w300 Normal/regular/plain w400(默认) Medium w500 Semi-bold w600 Bold w700 Extra-bold- w800 Black 900 所以如果对于默认字体有疑问,可以在你的手机字体找找是否有对应的字体,比如虽然我们说 roboto 没有 600 ,但是如果是 roboto mono 字体集是有 600 的 fontweight,甚至还有 600 斜体: https://fonts.google.com/specimen/Roboto+Mono 。
这里可以用 Android Studio 的
Device File Explorer
查看/system/etc/fonts.xml
下当前手机的字体编码情况,右键该文件save as
到电脑上,下图是华为上的fonts.xml
截图:你也可以通过如下原生代码,获取到对应现在 Android 系统支持的字体
Typeface
,但是这个Typeface
并不是真正的字体名,要对应在fonts.xml
下查看。protected Map<String, Typeface> getSSystemFontMap() { Map<String, Typeface> sSystemFontMap = null; try { //Typeface typeface = Typeface.class.newInstance(); Typeface typeface = Typeface.create(Typeface.DEFAULT, Typeface.NORMAL); Field f = Typeface.class.getDeclaredField("sSystemFontMap"); f.setAccessible(true); sSystemFontMap = (Map<String, Typeface>) f.get(typeface); for (Map.Entry<String, Typeface> entry : sSystemFontMap.entrySet()) { Log.e("FontMap", entry.getKey() + " ---> " + entry.getValue() + "\n"); } } catch (Exception e) { e.printStackTrace(); } return sSystemFontMap; } private static List<String> getKeyWithValue(Map map, Typeface value) { Set set = map.entrySet(); List<String> arr = new ArrayList<>(); for (Object obj : set) { Map.Entry entry = (Map.Entry) obj; if (entry.getValue().equals(value)) { String str = (String) entry.getKey(); arr.add(str); } } return arr; }
例如前面我们说过 Roboto 没有
w600
, 但是通过输出比对,华为上有source-sans-pro
是支持w600
:另外注意这是 Flutter 而不是原生,具体实现调用是在 Engine 的 paragraph_skia.cc 和 paragraph_builder_skia.cc 下对应的
setFontFamilies
相关逻辑,当然默认字体库指定在typography.dart
下就看到,例如'Roboto'
、'.SF UI Display'
、'.SF UI Text'
、'.AppleSystemUIFont'
、'Segoe UI'
:名称 值 Android,Fuchsia,Linux Roboto iOS .SF UI Display,.SF UI Text MacOS .AppleSystemUIFont Windows Segoe UI 例如:.SF Text 适用于更小的字体;.SF Display 则适用于偏大的字体,我记得分水岭好像是 20pt 左右,不过 SF(San Francisco) 属于动态字体,系统会动态匹配。
另外如果你在 Mac 的 Web 上使用 Flutter Web,可以看到指定的是
.AppleSystemUIFont
,而对于.AppleSystemUIFont
它其实不算是一种字体,而是苹果上字体的一种集合别称:还有,如果你去看 Flutter 默认自带的
cupertino/context_menu_action.dart
,就可以看到一个有趣的情况:为了强调和 iOS 上的样式尽量一直,当开发者配置
isDefaultAction == true
时,会强行指定'.SF UI Text'
并指定为FontWeight.w600
。当然,前面我们说了那么多,主要是针对英文的情况下,而在中文下还是有差异的,之前的文章也介绍过:
-
默认在 iOS 上:
- 中文字体:
PingFang SC
- 英文字体:
.SF UI Text
、.SF UI Display
- 中文字体:
-
默认在 Android 上:
- 中文字体:
Source Han Sans
/Noto
- 英文字体:
Roboto
- 中文字体:
例如,在苹果上的简体中文其实会是
PingFang SC
字体,对应还有PingFang TC
和PingFang HK
的繁体集,而关于这个问题在 Flutter 上之前还出现过比较有意思的 bug :用户在输入拼音时,iOS 会在中文拼音之间添加额外的
unicode \u2006
字符,比如输入"nihao"
,iOS 系统会在 skia 中添加文字“ni\u2006hao ”
,从而导致字体无效的情况。当然后续的 #16709 修复了这个问题 ,而在以前的文章我也讲过,当时我遇到了 “Flutter 在 iOS 系统上,系统语言是韩文时,在和中文一起出现会导致字体显示异常" 的问题 :
解决方法也很简单,就是给
fontFamilyFallback
配置上["PingFang SC" , "Heiti SC"]
就可以了,这是因为韩文在苹果手机上使用的应该是Apple SD Gothic Neo
这样的超集字体库,【广】这个字符在这个字体集上是不存在的,所以就变成了中文的【广】;所以可以看到,字体相关是一个平时很少会深入接触的东西,但是一旦涉及多语言和绘制,就很容易碰到问题的领域。
-
-
英文字体识别在线识别_如何查找和识别字体
2020-08-31 10:00:26英文字体识别在线识别Wether you’re trying to find the best font for your novella, because you’re a selfpublisher, or you’re designing a leaflet as a startup graphics designer — the licensing fees ...