我怎么知道这里用什么字体制作"枫糖浆" ?
我打开了页面源代码，但我没有看到使用的字体。我喜欢用这种漂亮的字体。我相信这与css有关，但我还没能弄清楚css代码在哪里，如果这是指定字体的地方。
我对网上的东西一窍不通。另外，我如何判断这是开放使用字体还是专有字体?https://runamokmaple.com/
<li>
1012
<div class="smm-mega-menu">
1013
<div class="smm-row"><div class="smm-span-3"><aside id="nav_menu-7" class="widget widget_nav_menu"><div class="menu-maple-syrup-container"><ul id="menu-maple-syrup" class="menu"><li id="menu-item-8295" class="menu-header menu-item menu-item-type-custom menu-item-object-custom menu-item-8295"><a href="https://runamokmaple.com/shop/maple-syrup/">MAPLE SYRUP</a></li>
如果可能的话，我想要一个能在iPhone上运行的答案。
右键单击该元素，查看它。在样式选项卡中过滤CSS属性，例如输入font-family，就可以了。
font-family: avenir next,Arial,sans-serif;
运行此代码后，结果将被复制到剪贴板。您可以将结果粘贴到任何文本编辑器中查看。
var ret = {};
var elements = document.querySelectorAll('*');
elements.forEach(function (element) {
var font = {
fontFamily: getComputedStyle(element).fontFamily,
fontWeight: getComputedStyle(element).fontWeight,
fontStyle: getComputedStyle(element).fontStyle
};
var fontKey = font.fontFamily + ':' + font.fontWeight + ':' + font.fontStyle;
if (ret[fontKey]) {
ret[fontKey].count++;
} else {
ret[fontKey] = {
font: font,
count: 1
};
}
});
var resultString = '';
Object.values(ret).forEach(function (item) {
var font = item.font;
var count = item.count;
resultString += 'Font: ' + font.fontFamily + 'n';
resultString += 'Weight: ' + font.fontWeight + 'n';
resultString += 'Style: ' + font.fontStyle + 'n';
resultString += 'Count: ' + count + 'nn';
});
console.log(resultString);
var textarea = document.createElement('textarea');
textarea.value = resultString;
document.body.appendChild(textarea);
textarea.select();
textarea.setSelectionRange(0, textarea.value.length);
document.execCommand('copy');
document.body.removeChild(textarea);
查找特定文本的font-family
这个问题是。 我怎么知道这里的"枫糖浆"是用什么字体制作的? Bill Fransen的回答是正确的，但缺乏新手的细节，Mikhail Chernysh的回答是有用的，但缺乏任何解释，并没有确切指出"MAPLE syrupp ">是用什么字体呈现的。 看到方法1 下面的例子是一个简短的幻灯片使用Chrome浏览器。HTML和JavaScript仅用于演示目的。在整页模式下查看
请参见方法2方法1
在浏览器中使用开发人员工具。
$(".bx").bxSlider();<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<main class="bx">
<section>
<img src="https://i.ibb.co/n0V40Wq/inspect.png">
</section>
<section>
<img src="https://i.ibb.co/jGXqn7k/developertools.png">
</section>
<section>
<img src="https://i.ibb.co/6NMn7Gx/stylestab.png">
</section>
<section>
<img src="https://i.ibb.co/hZM3N5d/computedtab.png">
</section>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.min.js"></script>
方法2
使用JavaScript在这个例子中，用于呈现文本的字体来自fontCDN.com(像Google Fonts)。我找不到具有字体Avenir Next的字体CDN，所以我解决了Avenir。你仍然可以下载文件并自己托管它们。
详细信息在示例中被注释
/**
* It finds the CSS propertyValues of each propertyName given that is
* computed on a given DOM Object (HTMLElement) or pseudo-element (CSS `::selector`).
* @param {Object<DOM>} node - HTMLElement referenced as a DOM Object.
* @param {String<selector>} pseudoElement - Pseudo-element of node, if there is none,
* null is required.
* @param {Array<spread>} properties - One or more CSS propertyNames.
* @returns {Object} - An Object literal -- each propertyName of properties
* is a key and it's corresponding propertyValue is
* assigned as it's value.
*/
const findStyles = (node, pseudoElement, ...properties) => {
const cS = getComputedStyle(node, pseudoElement);
const aA = properties.map(prop => {
let pV = cS.getPropertyValue(prop);
return [prop, pV];
});
return Object.fromEntries(aA);
}
const foot = document.querySelector("footer");
const fS = findStyles(foot, null, "font-family", "font-size", "line-height");
console.log(JSON.stringify(fS));/**
* Alternate method to access CDNFonts
*/
/* @import url('https://fonts.cdnfonts.com/css/avenir');
*/
:root {
font: 2.25ch/1.15 'Avenir';
}<!DOCTYPE html>
<html>
<head>
<!--
Primary method to access CDNFonts
-->
<link href="https://fonts.cdnfonts.com/css/avenir" rel="stylesheet">
<!--
Inline CSS goes inside <style>
↙️ -->
<style></style>
</head>
<body>
<HEADER>
<header>
<h1><H1> Masthead</h1>
<p><P> Deck</p>
</header>
<MAIN>
<main>
<h2><H2> Headline</h2>
<p><P> Subhead</p>
<ARTICLE>
<article>
<p><P> Copy</p>
</article>
</main>
<FOOTER>
<footer>
<address>
<ADDRESS> <a href="mailto:zer00ne@null.net"><A> Email zer00ne</a>
</address>
</footer>
<!--
It's common practice to place all <script>s before the
closing </body> tag.
Load external JavaScript before the inline JavaScript
-->
<script src="https://website.com/path/to/script.js"></script>
<!--
Inline JavaScript goes inside <script>
↙️ -->
<script></script>
</body>
</html>