如何比较不同粗细的 OpenType 字体是不是相同？
Posted
技术标签:
【中文标题】如何比较不同粗细的 OpenType 字体是不是相同？【英文标题】：How to compare OpenType fonts with different weight to see if they are the same?如何比较不同粗细的 OpenType 字体是否相同？ 【发布时间】：2019-02-19 23:35:43 【问题描述】：我有一堆不同粗细和样式的 OpenType 字体文件（例如，ComicSans100.otf、ComicSans200.otf、ComicSans300.otf 和 TimeNewRoman.otf 和 TimesNewRomanItalic.otf）。向我提供这些文件的人不确定是否修改了不同字体的粗细和样式。例如，ComicSans400.otf 中的字符来自ComicSans100.otf，权重为 400，但经过调整以更好看。
我想知道是否有办法确保如果我使用 ComicSans100.otf 并为其应用 400 的权重，所有字符看起来都与 ComicSans400.otf 中的字符相同。
我问这个的原因是我想在 android 应用程序中使用这些字体。而且每种字体都会增加应用的大小。
【问题讨论】：
我们在谈论多少种不同的字体？您是否需要一个输出类似于Font A does/doesn't match Font B 的全自动解决方案？
@DanielLerps 我有大约 12 种不同的字体。所以自动化不是必需品。 :)
我不明白您所说的“如果我采用 ComicSans100.otf 并应用 400 的权重”是什么意思。除非它是可变宽度字体，否则您不会“为字体分配权重”，单个字体只有一个权重，您可以分配所有想要的字体，但充其量它什么也不做。您需要将每种字体分别绑定到每个权重。没有它，充其量不会发生任何事情并且事情保持不变，但最坏的情况是您现在正在强制使用虚假的粗体/变亮。
@Mike'Pomax'Kamermans 感谢您的评论。我想我对字体工作原理的理解是不正确的。我认为我可以为字体分配权重以增加它的“最大胆”。我研究了 Android 框架，但无法以编程方式增加字体的权重。所以这证实了你告诉我的。 :) 也许我应该删除我的问题，但同时比较“cheticamp”中的两种字体的机制非常好。
只有当你有一个 family 字体时，你才能这样做，要么是因为操作系统知道它们，要么是因为你指定了多个 @font-face 规则，所有这些都是为了相同的font-family，但具有不同的权重/变体/等属性，指向每个变体的不同字体资产。例如，Comic Sans 的 9 个 @font-face 规则，权重为 100 到 900，每个都指向它们各自加权的字体资源。然后，当您说出 p font-family 'Comic Sans'; weight: 600; 之类的内容时，您的 CSS 将能够找到正确的字体。
【参考方案1】：
这是一种简单而直观的方式来验证您的两种字体是否产生相同的字符。
用四个TextViews定义一个ConstraintLayout：tv1，tv2，
tv3 和 tv4。如下定义文本颜色和字体。你
正在检查 font1 和 font2 彼此。 （确保TextViews的背景是透明的。
tv1：红色，字体1
tv2: 蓝色字体2
tv3: 蓝色字体2
tv4：红色，字体1
将tv1 置于tv2 之上，将tv3 置于tv4 之上。
将您要检查的所有字符放入每个TextViews。寻找任何不匹配的颜色
顶部TextView。对于tv1 在tv2 之上，您应该看到所有红色
也没有蓝色。对于tv3 在tv4 之上，您应该看到所有蓝色和
没有红色。
这可能是自动化的，但如果简单的设置和目视检查就足够了，则可能不值得付出努力。一种有价值的自动化可能是寻找有问题的颜色的像素。
这是可能的布局。这个简单的案例只是将默认字体视为粗体而不是粗体。
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_
android:layout_
android:layout_margin="16dp"
tools:context=".MainActivity">
<TextView
android:id="@+id/tv2"
android:layout_
android:layout_
android:background="@android:color/transparent"
android:text="ABCEFGHIJKLMNOPQRSTUVWXYZ"
android:textColor="@android:color/holo_blue_light"
android:textSize="20sp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv1"
android:layout_
android:layout_
android:background="@android:color/transparent"
android:text="ABCEFGHIJKLMNOPQRSTUVWXYZ"
android:textColor="@android:color/holo_red_light"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="@+id/tv3"
android:layout_
android:layout_
android:background="@android:color/transparent"
android:text="ABCEFGHIJKLMNOPQRSTUVWXYZ"
android:textColor="@android:color/holo_red_light"
android:textSize="20sp"
android:textStyle="bold"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/guideline" />
<TextView
android:id="@+id/tv4"
android:layout_
android:layout_
android:background="@android:color/transparent"
android:text="ABCEFGHIJKLMNOPQRSTUVWXYZ"
android:textColor="@android:color/holo_blue_light"
android:textSize="20sp"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@id/guideline" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/guideline"
android:layout_
android:layout_
android:orientation="horizontal"
app:layout_constraintGuide_percent="0.50" />
</androidx.constraintlayout.widget.ConstraintLayout>
这是查看差异的输出。此快照来自 Android Studio 设计器。
如果要检查的字符可能很多，上述方法会很困难并且容易出错。一种更自动化的方法是像上面一样定义两个文本视图，使用相同的文本加载它们，但使用将相互测试的两种字体。
MainActivity.java 下面是一小段代码，它采用两个 TextView 并逐个像素地比较它们，并记录它们是否不同或相同。
public class MainActivity extends AppCompatActivity
@Override
protected void onCreate(Bundle savedInstanceState)
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TextView tv1, tv2;
tv1 = findViewById(R.id.tv1);
tv2 = findViewById(R.id.tv2);
// Get all characters to check into a string.
String s = getTextToCheck();
tv1.setText(s);
tv2.setText(s);
final ConstraintLayout mLayout = findViewById(R.id.layout);
mLayout.post(new Runnable()
@Override
public void run()
Bitmap bitmap = Bitmap.createBitmap(mLayout.getWidth(), mLayout.getHeight(),
Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);
mLayout.draw(canvas);
compareRects(bitmap, getViewRect(tv1), getViewRect(tv2));
);
private void compareRects(Bitmap bitmap, Rect rect1, Rect rect2)
int x1 = rect1.left;
int x2 = rect2.left;
if (rect1.width() != rect2.width())
Log.i("CompareFonts", "<<<< TextView widths do not match");
if (rect1.height() != rect2.height())
Log.i("CompareFonts", "<<<< TextView heights do not match");
int totalPixels = 0;
int diffCount = 0;
while (x1 < rect1.right && x2 < rect2.right)
int y1 = rect1.top;
int y2 = rect2.top;
while (y1 < rect1.bottom && y2 < rect2.bottom)
int pixel1 = bitmap.getPixel(x1, y1);
int pixel2 = bitmap.getPixel(x2, y2);
if (pixel1 != pixel2)
diffCount++;
totalPixels++;
else if (pixel1 != 0)
totalPixels++;
y1++;
y2++;
x1++;
x2++;
Log.i("CompareFonts", String.format(Locale.US, "<<<< Total pixels compared = %,d", totalPixels));
Log.i("CompareFonts", String.format(Locale.US, "<<<< Different pixel count = %,d (%%%.2f) ",
diffCount, (float) diffCount * 100 / totalPixels));
private Rect getViewRect(View view)
Rect rect = new Rect();
rect.left = view.getLeft() + view.getPaddingLeft();
rect.right = view.getRight() - view.getPaddingRight();
rect.top = view.getTop() + view.getPaddingTop();
rect.bottom = view.getBottom() - view.getPaddingBottom();
return rect;
private String getTextToCheck()
// Define any text to check. This is just the printable ASCII character set.
StringBuilder sb = new StringBuilder();
for (int i = 32; i <= 126; i++)
sb.append((char) i);
return sb.toString();
【讨论】：
这是个好主意！我更想确保所有字符都相同，而不仅仅是大写的 A-Z，但我可以循环进入所有 unicode 来检查它们。 @Thierry-DimitriRoy 好吧，如果您有可能在 12 个字体系列中检查数千个字符，这可能会变得很困难。在这种情况下，一些循环遍历 Unicode 并逐位检查TextView 内容的代码可能会很有用。我会考虑发布一些可以进行位检查的代码。
基本上“不要在手机本身上执行此操作”，编写一个程序或脚本在从未实际渲染到屏幕的图形上下文中执行此操作，然后测试像素颜色。如果一种字体纯色 (255,0,0) 而另一种 (0,0,255) 则 x 和 y 之间的差异太大的任何像素 (x,0,y)（相同的字体将具有 x==y但相同字体的不同版本可能不会）是对“我们有多么不同”的一个统计。将它们添加到整个四边形（NxN 区域；N 在字体本身中定义），然后选择一个值来决定。例如。 ">0.5 不同？不同的字体"。【参考方案2】：
手动分析字体的首选工具是FontForge。
要进行比较，首先并排打开相似的字体：
您可以看到我的两种字体是 A750Sant-Regular（左）和 A750Sans-Bold（右）。
接下来，要比较粗体和增加权重的Regular，点击“编辑->全选”，然后“元素->样式->更改权重”，可以直观地比较结果。
对于我的示例字体，有很大的不同，所以我会保留两者。
还有一个比较两种字体的自动功能，在“元素 -> 比较字体”下，但我认为这不是你想要的。
【讨论】：
这不是正确相似的字体的解决方案（这就是问题所在），因为如果不进行自动或手动覆盖，您的眼睛无法看到差异，正如 2 天前建议的那样这个答案。 嗯，问题是关于“所有字符看起来都一样”，而不是相同。因此进行了可视化分析。 确实，对于非常相似的字体，这不能作为视觉分析，只有叠加演示才能突出差异，因为人类在识别森林中的树木方面非常糟糕。例如，您的解决方案对于区分 ComicSans500 和 ComicSans600 之间的区别并没有真正的帮助。以上是关于如何比较不同粗细的 OpenType 字体是不是相同？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 CFF2 表在 OpenType 中定义没有任何变体的字体
TrueType 和 OpenType 字体是不是应该转换为 WOFF 以便在 Web 上使用？
任何 iOS Web 浏览器是不是都通过 CSS 支持 OpenType 字体功能？