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 ligatures
 sans-serif没有连字的字体 
serif a font with ligatures
 serif字体带连字 
monospace a font especially good for code
 monospace字体，特别适合代码 
cursive used to simulate handwritten pieces
 cursive用于模拟手写作品 
fantasy the name says it all
 fantasy这个名字说明了一切 
 
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 and normal. There is very little, if any, difference between using italic and oblique. The first is easier to me, as HTML already offers an i 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 and font-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, including src, 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.
 
 
 当然，加载字体会影响性能，在创建页面设计时必须考虑这些影响。 
 
 

  
翻译自: https://flaviocopes.com/css-fonts/
 
 
css字体加粗

 效果图：
 
   
 
 
 
 
 
 ctx.font = 'normal bold 36px Arial,sans-serif '
 
 
 
          

直接上代码
 
tv_subject_name.getPaint().setFakeBoldText(true);
tv_subject_name.getPaint().setTypeface(Typeface.DEFAULT_BOLD);

 
Unity UGUI 字体加粗特效
 
1.前言
2.优化(一)
3.优化(二)

 
1.前言
 
在项目组无可厚非会在一些描述的文本中加入粗体，比如标题或者是重要文字，然而Unity本身UGUI提供的Text的Bold属性在某些字体达到的效果并不尽人意，可以先看下原本Unity的效果：
 
 
2.优化(一)
 
原本的效果肯定是不满足美术需求的，我们需要通过字体渲染方面重新实现字体加粗效果，在本文中核心算法其实就是将文本重复绘制，也就是在同样的位置绘制某个字符网格多次，可以近似实现这个字符的加粗效果。
 
using UnityEngine;
using System.Collections.Generic;
using UnityEngine.UI;
[RequireComponent(typeof(Text))]
public class BoldTextEffect : BaseMeshEffect
{
	[Range(0, 1)] public float Alpha;
	[Range(1, 5)] public int Strength;
	
	
	private Text m_Text = null;

	private Text TextComp
	{
		get
		{
			if (m_Text == null)
			{
				m_Text = GetComponent<Text>();
			}

			return m_Text;
		}
	}

	private Color effectColor
	{
		get
		{
			if (TextComp == null)
			{
				return Color.black;
			}

			return TextComp.color;
		}
	}
	

	protected void ApplyShadowZeroAlloc(List<UIVertex> verts, Color32 color, int start, int end, float x, float y)
	{
		int num = verts.Count + end - start;
		if (verts.Capacity < num)
			verts.Capacity = num;
		for (int index = start; index < end; ++index)
		{
			UIVertex vert = verts[index];
			verts.Add(vert);
			Vector3 position = vert.position;
			position.x += x;
			position.y += y;
			vert.position = position;
			Color32 color32 = color;
			color32.a = (byte) ((int) color32.a * (int) verts[index].color.a / (int) byte.MaxValue);
			color32.a = (byte)(Alpha * color32.a);
			vert.color = color32;
			verts[index] = vert;
		}
	}

    public override void ModifyMesh(VertexHelper vh)
	{
		if (!IsActive())
		{
			return;
		}

		List<UIVertex> verts = new List<UIVertex>();
		vh.GetUIVertexStream(verts);


		for (int i = 0; i < Strength; ++i)
		{
			ApplyShadowZeroAlloc(verts, effectColor, 0, verts.Count, 0, 0);
		}
		
		vh.Clear();
		vh.AddUIVertexTriangleStream(verts);
    }
}
 
在上面这个组件中暴露了两个可供美术调节的参数：Alpha，Strength
 
Alpha : 重复渲染字体网格的透明度，用于调整加粗的硬度
Strength: 重复渲染字体网格的次数，用于调整加粗的强度
 
使用方法，只需要将这个组件挂载到Text物体上，调整上面两个参数直至效果满意为止，下面是示例图：
 
 
3.优化(二)
 
现在实现了控件级的字体加粗，我们还需要实现RichText的<b>标签，也就是灵活的控制Text中某些字体的粗细效果。在这里实现的思路就是，通过记录<b>标签的开始和结束为止，然后只在其区间内的字体网格进行绘制。
 
using UnityEngine;
using System.Collections.Generic;
using System.Text.RegularExpressions;
using UnityEngine.UI;
[RequireComponent(typeof(Text))]
public class BoldTextEffect : BaseMeshEffect
{
	[Range(0, 1)] public float Alpha;
	[Range(1, 5)] public int Strength;

	public string RichText = "";	
	
	private Text m_Text = null;

	private Text TextComp
	{
		get
		{
			if (m_Text == null)
			{
				m_Text = GetComponent<Text>();
			}

			return m_Text;
		}
	}

	private Color effectColor
	{
		get
		{
			if (TextComp == null)
			{
				return Color.black;
			}

			return TextComp.color;
		}
	}
	
	protected void ApplyShadowZeroAlloc(List<UIVertex> verts, Color32 color, int start, int end, float x, float y)
	{
		int num = verts.Count + end - start;
		if (verts.Capacity < num)
			verts.Capacity = num;
		for (int index = start; index < end; ++index)
		{
			UIVertex vert = verts[index];
			verts.Add(vert);
			Vector3 position = vert.position;
			position.x += x;
			position.y += y;
			vert.position = position;
			Color32 color32 = color;
			color32.a = (byte) ((int) color32.a * (int) verts[index].color.a / (int) byte.MaxValue);
			color32.a = (byte)(Alpha * color32.a);
			vert.color = color32;
			verts[index] = vert;
		}
	}
	
	private static readonly Regex s_BoldBeginRegex = new Regex("<b>", RegexOptions.Singleline);
	private static readonly Regex s_BoldEndRegex = new Regex("</b>", RegexOptions.Singleline);

	private MatchCollection begin = null;
	private MatchCollection end = null;
	
	
    public override void ModifyMesh(VertexHelper vh)
	{
		if (!IsActive())
		{
			return;
		}

		List<UIVertex> verts = new List<UIVertex>();
		vh.GetUIVertexStream(verts);

		
		if (!string.IsNullOrEmpty(RichText) && begin != null && end != null)
		{
			int offset = 0;
			for (int i = 0; i < begin.Count && i < end.Count; ++i)
			{
				for (int j = 0; j < Strength; ++j)
				{
					ApplyShadowZeroAlloc(verts, effectColor, (begin[i].Index - offset) * 6, (end[i].Index - offset - 3) * 6, 0, 0);
				}
				offset += 7;
			}
			
		}
		else
		{
			for (int i = 0; i < Strength; ++i)
			{
				ApplyShadowZeroAlloc(verts, effectColor, 0, verts.Count, 0, 0);
			}
		}
		
		
		vh.Clear();
		vh.AddUIVertexTriangleStream(verts);
    }


	public void SetText(string text)
	{
		this.RichText = text;
		begin = s_BoldBeginRegex.Matches(RichText);
		end = s_BoldEndRegex.Matches(RichText);
	
		text = text.Replace("<b>", "");
		text = text.Replace("</b>", "");

		if (m_Text != null)
		{
			m_Text.text = text;
		}
	}
	
}