font-family是一个CSS属性,它将字体和通用字体系列(按列出的顺序排列优先级)应用于给定或选定的元素。
所以我试图为某些字体创建别名,而别名在没有任何明显原因的情况下被忽略。看看这个例子。所以我刚刚为“PingFang S...
在CSS中,当我输入“font-family: cursive”作为id时,它输出Comic Sans(h1元素) 我有一个 h1 选择器和两个元素类(编码教程 idk 为什么),以及 id 我...
如何在node js项目中的pug文件中为pdf添加自定义阿拉伯字体
我正在使用 wkhtmltopdf 库将 pug 文件转换为 PDF,在 pug 文件中我有阿拉伯语和英语文本,但我希望阿拉伯语文本的特定字体显示在 PDF 文件中 我尝试过,但它给了......
我将此 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 编辑器富文本来编辑文本样式...我在更改字体系列时遇到问题,始终无法从列表中选择选项,所选选项是 as
为什么当我创建此 CSS 规则 `h1 {font-family: Tahoma}` 时它不起作用?
我有一个考试要求我“更新以下 CSS 代码,以便所有 1 级标题、2 级标题和段落元素都使用“Tahoma”字体。然后,重置盒子模型...
如何在css html中在服务器上的浏览器中设置font-family
我做了一个简单的项目 在其中,我向所有标签、正文和 * 添加了字体 但在本地一切都是正确的并且运行良好 即使我添加了字体系列也很重要,但是当项目交付使用时...
在服务器上的浏览器中以css html设置font-family
我做了一个简单的项目 在其中,我向所有标签、正文和 * 添加了字体 但在本地一切都是正确的并且运行良好 即使我添加了字体系列也很重要,但是当项目交付使用时...
我有一个 .ttf 文件,当我在 Windows 中打开它时,右上角有一个选项可以选择字体的一种变体。我怎样才能将这些变体提取到它们自己的单独的 .ttf fi...
我在我的 .css 文件中使用了这样的样式,但它不起作用。我该怎么做才能让我的代码正常工作? 字体系列:Lato、Helvetica、sans-serif; 链接:http://www.google.com/fonts/specimen/Lato
如何为 Java Swing 应用程序向 FlatLaf 添加自定义字体系列
我正在尝试使用 FlatLaf 更改 Java Swing 应用程序的字体系列。 如果能找到一种方法在 FlatLaf 的自定义主题文件 (mytheme.properties) 中更改它,那就太酷了。我看到...
用于 Java Swing 应用程序的带有 FlatLaf 的字体系列
我正在尝试使用 FlatLaf 更改 Java Swing 应用程序的字体系列。 如果能找到一种方法在 FlatLaf 的自定义主题文件 (mytheme.properties) 中更改它,那就太酷了。我看到...
CSS:将字体系列更改为 -apple-system 字体后,字体仍为 Arial
我想在我的网站上使用 Airbnb 为其网站使用的字体系列。它是“Circular、-apple-system、BlinkMacSystemFont、Roboto、Helvetica Neue、sans-serif”。然而,当我设置后...
我正在尝试将网站(https://chromewebstore.google.com/)上特定元素的字体系列更改为我的自定义字体,而不是网站使用的字体。为此,我创建了自己的 Ch...
如何将我选择的新字体添加到 Visual Studio 代码中?
我对编码相当陌生,我正在努力解决以下问题。 我在网上搜索了很多次关于如何更改 VScode 中的字体以匹配项目上使用的不同字体...
如何在 Matplotlib 中组合普通字体和 Latex 字体类型?
我知道 Matplotlib 的 math_fontfamily 可以在同一字符串中混合系列字体类型。我在我的标题中使用了该功能,并且效果非常好。例如: ax[0].set_title(r'总响应 $\
是否可以获取元素渲染字体的文件名? 例子: @font-face { 字体系列:'MyFont'; src: url('../../public/fonts/MyFont-Bold.woff2') 格式('woff2'); 字体威格...
可以在.Net Maui Editor中使用fontstream来应用字体系列
是否可以通过使用 .net Maui 的编辑器控件中的特定字体流来应用字体系列? 如果可能意味着如何实现这一目标? 我只是想问一下实现我的
在 NetSuite 中将 Serif 字体添加到高级 PDF
我希望在高级 PDF 中有一个特定行显示为衬线字体(具体为 Times New Roman)。我已将 .ttf 文件上传到文件柜并显示“无需...即可使用”