font-family 相关问题

应用 Comic Sans Ms 字体样式

如何为以下字体编写CSS字体样式： font-family：Comic Sans MS CSS 规则不起作用。

React Native 不接受使用 useFonts 钩子导入的字体

我使用 expo cli 使用 useFonts 导入了一些自定义字体文件，但出现错误， fontFamily“ProductSans”不是系统字体，尚未通过 Font.loadAsync 加载 ...

字体样式斜体在 windowsOS 中不起作用，但在 MacOS 中起作用

嗨，我正在 nextjs 项目中工作，我们使用 font-family 作为 TT 规范专业版。 这里的 font-style: italic 在 Windows 操作系统中不起作用，但在 MAC 操作系统中起作用。 我不知道为什么它不起作用。 C...

向 @font-face 定义添加后备字体

是否可以直接将后备字体添加到字体的定义中？ 例子： @font-face { 字体系列：'MyWebFont'、Arial、Helvetica、sans-serif； src: url('字体/MyWebFont.eot'...

从 tomcat 版本 8.5 升级到 9 后，服务器中的默认字体系列发生了变化

最近我们的团队已将 tomcat 版本 8.5 升级到 9，我们在报告生成中看到以下变化： 在 Tomcat 8.5 中 当我们从 Excel 文件生成 pdf 报告时，我们注意到以下行为...

lang="ur" 改变 safari 显示文本的方式

我面临一个问题，在 html 元素上设置 lang="ur" 会改变 Safari 显示文本的方式： 常量基数 = ` 身体 { 字体-</desc> <question vote="0"> <p>我面临一个问题，在 <pre><code>lang=&#34;ur&#34;</code></pre> 元素上设置 <pre><code>html</code></pre> 会改变 Safari 显示文本的方式：</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>const base = ` &lt;html lang=&#34;ar&#34;&gt; &lt;head&gt; &lt;style&gt; body { font-family: &#34;Helvetica Neue&#34;; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; ٹیسٹ &lt;/body&gt; &lt;/html&gt; ` const a = document.createElement(&#39;iframe&#39;) a.src = &#34;data:text/html;charset=utf-8,&#34; + base; const b = document.createElement(&#39;iframe&#39;) b.src = &#34;data:text/html;charset=utf-8,&#34; + base.replace(&#39;ar&#39;,&#39;ur&#39;); document.body.appendChild(a); document.body.appendChild(b);</code></pre> </div> </div> <p></p> <p>为什么会发生这种情况以及如何预防？</p> <p><a href="https://i.sstatic.net/gk8OPNIz.png" rel="nofollow noreferrer"><img src="https://cdn.txt58.com/i/AWkuc3N0YXRpYy5uZXQvZ2s4T1BOSXoucG5n" alt="enter image description here"/></a></p> </question> <answer tick="false" vote="0"> <p>根据 MacOS 上的 Font Book，Helvetica Neue 的捆绑版本实际上不包含任何阿拉伯字符。 Arial 确实如此。</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="false"> <div> <pre><code>const base = ` &lt;html lang=&#34;ar&#34;&gt; &lt;head&gt; &lt;style&gt; body { font-family: &#34;Helvetica Neue&#34;, Arial; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; ٹیسٹ &lt;/body&gt; &lt;/html&gt; ` const a = document.createElement(&#39;iframe&#39;) a.src = &#34;data:text/html;charset=utf-8,&#34; + base; const b = document.createElement(&#39;iframe&#39;) b.src = &#34;data:text/html;charset=utf-8,&#34; + base.replace(&#39;ar&#39;,&#39;ur&#39;); document.body.appendChild(a); document.body.appendChild(b);</code></pre> </div> </div> <p></p> </answer> </body></html>

如何将全局字体应用到整个 HTML 文档

我有一个 HTML 页面，其中包含一些文本和格式。我想让它具有相同的字体系列和相同的文本大小，忽略文本的所有内部格式。 我想设置一个全局字体......

我已经下载并安装了 Gilroy 字体。但它没有出现在vscode中，也没有应用到网站上。有人知道解决方案吗？

我已经下载并安装了 Gilroy 字体。但它没有出现在 vscode 中，也没有应用于网站。有人知道解决方案吗？ 我尝试从互联网上下载字体然后下载到它......

npx React-Native 链接命令在最新版本的 React Native 中不起作用。我们如何在我的项目中链接自定义字体系列

当我运行命令时，我想在我的反应本机项目中使用自定义字体系列 npx 反应本机链接 它向我显示错误错误无法识别的命令“链接”。据我检查...

获取React JS中的所有字体系列

我是 ReactJS 的新手。我试图在下拉列表中显示所有字体系列，这样，如果我选择其中一种字体系列，则文本（以 SVG 形式显示）字体系列将会更改。 我知道在 .net 中我们...

@font-face 忽略本地字体

所以我试图为某些字体创建别名，而别名在没有任何明显原因的情况下被忽略。看看这个例子。所以我刚刚为“PingFang S...

font-family：草书输出漫画无字体CSS

在CSS中，当我输入“font-family: cursive”作为id时，它输出Comic Sans（h1元素） 我有一个 h1 选择器和两个元素类（编码教程 idk 为什么），以及 id 我...

如何在node js项目中的pug文件中为pdf添加自定义阿拉伯字体

我正在使用 wkhtmltopdf 库将 pug 文件转换为 PDF，在 pug 文件中我有阿拉伯语和英语文本，但我希望阿拉伯语文本的特定字体显示在 PDF 文件中 我尝试过，但它给了......

为什么我的 SVG 文件没有使用我的字体文件？

我将此 SVG 文件与此字体的 TTF 文件位于同一目录中。 我将此 SVG 文件与 此字体的 TTF 文件放在同一目录中。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="150" height="100" viewBox="0 0 150 100" > <style type="text/css"> @font-face { font-family: "easyPrint"; src: url('./easy-print.regular.ttf'); } </style> <text x="10" y="30" class="word" font-family="easyPrint" font-size="25" > TEST </text> <text x="10" y="80" font-size="25" > TEST </text> </svg> 当我这样做时，我得到两种不同的字体。应该是我的自定义字体的字体与您在字体系列中给它乱码时看到的字体相同。这与默认值不同。 我也尝试过使用 OTF 文件。具体字体并不重要。我只是想生成一堆具有特定字体的文本 SVG 图像。 如果您需要独立的 svg 文件， 您应该考虑将字体文件嵌入为 base64 资源（使用像 transfonter 这样的工具）： 1.示例：嵌入为 base64 的字体 只要您的应用程序支持 CSS，此 svg 就会显示自定义字体（内联 svg，在 img 元素中引用，直接在浏览器中打开）。 <p>(Letter "a" is not contained in the reduced character subset)</p> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100"> <style> @font-face { font-family: 'easyPrint'; src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'); font-weight: normal; } </style> <text x="10" y="30" class="word" font-family="easyPrint" font-size="25" > TESTa </text> </svg> 您可以通过对字体进行子集化来显着减小文件大小： 仅选定的角色可用。 如果您正在部署 google 字体，您也可以尝试 vecta 的 nano 优化器，它具有非常需要的公开可用的 google 字体的自动嵌入功能。 2.示例：Svg2Png 此方法需要将字体内联为 dataURL。 否则 png 输出将呈现默认字体，如 Times。 function svg2Png(selector) { const svgEl = document.querySelector(selector); let svgVB = svgEl.getAttribute('viewBox'); let svgVBArr = svgVB ? svgVB.split(' ') : ''; let svgVBW = svgVBArr ? svgVBArr[2] : ''; let svgVBH = svgVBArr ? svgVBArr[3] : ''; let svgClientBB = svgEl.getBoundingClientRect(); let svgClientW = svgClientBB.width; let svgClientH = svgClientBB.height; let svgBB = svgEl.getBBox(); let svgW = svgVBW? svgVBW : svgBB.width; svgW = svgClientW > svgW ? svgClientW : svgW; let svgH = svgVBH? svgVBH : svgBB.height; svgH = svgClientH > svgH ? svgClientH : svgH; let blob = new Blob([svgEl.outerHTML], {type: 'image/svg+xml'}); let URL = window.URL; let blobURL = URL.createObjectURL(blob); let tmpImg = new Image(); tmpImg.src = blobURL; tmpImg.width = svgClientW > svgW ? svgClientW : svgW; tmpImg.height = svgClientH > svgH ? svgClientH : svgH; tmpImg.onload = () => { let canvas = document.createElement("canvas"); canvas.width = svgW; canvas.height = svgH; let context = canvas.getContext("2d"); // draw blob img to canvas with some delay setTimeout(function () { context.drawImage(tmpImg, 0, 0, svgW, svgH); let pngDataUrl = canvas.toDataURL(); let svgImg = document.createElement("img"); svgImg.width = svgW; svgImg.height = svgH; svgImg.class = "svgImg"; svgImg.src = pngDataUrl; // just additional wrapping for example usage let imgWrp = document.createElement("div"); imgWrp.setAttribute("class", "img-wrp"); imgWrp.appendChild(svgImg); document.body.appendChild(imgWrp); }, 300); }; } svg, img{ border:1px solid #ccc } .svg-wrp{ position:relative; overflow:auto; resize:both; width:50%; } <div class="btn-wrp"> <button type="button" onclick="svg2Png('svg')">svg2Png</button> </div> <div class="svg-wrp"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 100"> <style> @font-face { font-family: 'easyPrint'; src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'); font-weight: normal; } </style> <text x="10" y="30" class="word" font-family="easyPrint" font-size="25" > TEST </text> </svg> </div> 3.示例：创建 svg，其中文本呈现为路径 此示例部署 opentype.js 库。 Opentype.js 有一个方便的功能 font.getPath() 允许您根据之前加载的字体文件将字符串渲染为 svg <path> 元素。 let svgcontainer = document.querySelector('#svgcontainer'); let inputText = document.querySelector('#inputText'); // opentype.js accepts only ttf and otf let fontFile = 'https://fonts.gstatic.com/s/firasans/v15/va9E4kDNxMZdWfMOD5Vvl4jO.ttf'; inputText.addEventListener('change', function(e) { let testString = e.currentTarget.value; let params = { string: testString, font: fontFile, fontSize: 100, x: 0, y: 0, decimals: 3 } text2Path(params) }) //default let params = { string: inputText.value, font: fontFile, fontSize: 100, x: 0, y: 0, decimals: 3 } text2Path(params) function text2Path(params) { opentype.load(params.font, function(err, font) { if (!err) { let options = params.options; let path = font.getPath(params.string, params.x, params.fontSize, params.fontSize, options); let textPath = path.toSVG(params.decimals); let newSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); newSvg.classList.add('svgText'); newSvg.setAttribute('xmlns', "http://www.w3.org/2000/svg"); newSvg.insertAdjacentHTML('beforeend', textPath); svgcontainer.appendChild(newSvg); // adjust bbox let bb = newSvg.getBBox(); newSvg.setAttribute('viewBox', '0 0 ' + (bb.width + bb.x) + ' ' + (params.fontSize * 1.5)); //add downloadbtn let btnDownload = document.createElement("a"); btnDownload.setAttribute('download', 'font-' + params.string + '.svg'); btnDownload.textContent = 'Download'; let dataURl = getDataUrl(newSvg.outerHTML, 'image/svg+xml'); btnDownload.href = dataURl; svgcontainer.appendChild(btnDownload) } else { console.log('Font could not be loaded: ' + err); } }); } function getDataUrl(str, mime) { let dataUrl = 'data:' + mime + ';base64,' + btoa(unescape(encodeURIComponent(str))) return dataUrl; } .svgText { height: 10em; display: inline-block; border: 1px solid #ccc; } a { display: block } <script src="https://cdn.jsdelivr.net/npm/opentype.js@latest/dist/opentype.min.js"></script> <div class="layout"> <div class="frm-wrp"> <input id="inputText" type="text" value="Test"> </div> <div class="svgcontainer" id="svgcontainer"></div> </div> 替代方案：在图形编辑器中将文本转换为路径 这可能是最方便的解决方案。 确保所需的字体已在本地安装（在您的操作系统中）。 在 inkscape 等图形编辑器中打开 svg。 选择 <text> 元素并将它们转换为路径： inkscape：路径/对象到路径 Adobe Illustrator：输入/创建轮廓 SVG 中的字体嵌入 SVG 不会自动包含/嵌入所有使用的字体！ 如前所述：应用程序是否可以处理嵌入字体很大程度上取决于其CSS 支持。 大多数图像查看器都会失败。 使用嵌入字体编辑 SVG 通常，即使您使用 inkscape 等高级编辑器，这也根本不起作用。通常桌面应用程序依赖于基于系统的字体管理，因此它们无法以可编辑模式访问嵌入的字体子集。 您也可以尝试在浏览器中将 svg 转换为 pdf，并在打开时将所有字体转换为路径轮廓。 Inkskape（免费且开源）有一个“绘制所有文本”的选项。 （另请参阅这篇文章）。

如何在 TailwindCSS/Flowbite 中添加自定义 TTF 字体系列？

我想向我的项目添加自定义字体系列：Horyzen（ttf 格式） ./tailwind.config.js ： /** @type {import('tailwindcss').Config} */ 模块. 导出 = { 内容： [ '../模板...

Angular 编辑器富文本 kolkov 库字体系列问题

我正在使用 Angular 编辑器富文本来编辑文本样式...我在更改字体系列时遇到问题，始终无法从列表中选择选项，所选选项是 as

为什么当我创建此 CSS 规则 `h1 {font-family: Tahoma}` 时它不起作用？

我有一个考试要求我“更新以下 CSS 代码，以便所有 1 级标题、2 级标题和段落元素都使用“Tahoma”字体。然后，重置盒子模型...

如何在css html中在服务器上的浏览器中设置font-family

我做了一个简单的项目 在其中，我向所有标签、正文和 * 添加了字体 但在本地一切都是正确的并且运行良好 即使我添加了字体系列也很重要，但是当项目交付使用时...

在服务器上的浏览器中以css html设置font-family

我做了一个简单的项目 在其中，我向所有标签、正文和 * 添加了字体 但在本地一切都是正确的并且运行良好 即使我添加了字体系列也很重要，但是当项目交付使用时...

从包含多种字体的TTF中提取字体？

我有一个 .ttf 文件，当我在 Windows 中打开它时，右上角有一个选项可以选择字体的一种变体。我怎样才能将这些变体提取到它们自己的单独的 .ttf fi...