关于css中 font-family设置为Consolas无法生效的问题
请问为什么css中设置的字体Consolas无效？
- 此前在一部电脑上字体正常显示，回家之后用另一部电脑打开就无法生效了
- 已经检查系统安装了此字体，修改为其他字体也无法生效；
- 请教了前端朋友也看不出问题在哪
- 是否与浏览器兼容性有关？该如何修改？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test file</title>
<link rel="stylesheet" href="./CSShighlight.css">
</head>
<body>
<pre class="code-block"><code>
;;
procedure(Y_GetHeight(viaName @optional d_tech(techGetTechFile(ddGetObj(geGetEditCellView()->libName))) outCutParam(nil) "tdg")
let((ViaParam cutlppW maxEnc Height)
ViaParam = car(setof(x d_tech->viaDefs x->name == viaName))->params
unless(ViaParam error("* Cannot get via params - %A of %s from %s \n" ViaParam viaName d_tech->libName))
cutlppW = nth(1 ViaParam)
maxEnc = max(car(nth(6 ViaParam)) car(nth(7 ViaParam)))
if(outCutParam then
list(Height = cutlppW + 2*maxEnc list(cutlppW car(nth(5 ViaParam))))
else
Height = cutlppW + 2*maxEnc
)
);end let
);end proc
</code></pre>
<!-- 引入JavaScript文件 -->
<script src="lisp_highlighter.js"></script>
</body>
</html>/* lisp-highlight.css */
.code-block {
background-color: rgba(244, 244, 244, 0.2);
border: 1px solid rgb(221, 221, 221);
border-radius: 8px;
padding: 10px;
font-family: "Consolas", monospace !important;
font-size: 18px;
white-space: pre;
overflow-x: auto;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
.lisp-keyword {
color: rgb(158, 24, 232);
}
.lisp-function {
color: rgb(223, 150, 135);
}
.lisp-string {
color: rgb(36, 187, 105);
}
.lisp-comment {
color: rgb(187, 38, 37);
}// lisp-highlighter.js
document.addEventListener('DOMContentLoaded', function() {
// 定义LISP关键字和函数名
const lispKeywordsAndFunctions = ['procedure', 'let', 'if', 'then', 'else', 'cond', 'prog', 'car', 'cdr', 'nth',
'techGetTechFile', 'ddGetObj', 'setof', 'unless', 'max', 'min', 'when', 'while', 'for', 'case', 'list',
'optional', 'geGetEditCellView', 'geGetSelSet', 'error', 'warn', 'abs', 'centerBox', 'rexMatchp', 'foreach',
'mapcar', 'sort', 'artMakeString', 'evenp', 'oddp', 'nthelem', 'lessp', 'ciUtilsMakeUnique', 'makeTable',
'dbGetTrueOverlaps', 'cadr', 'xCoord', 'yCoord', 'cons', 'append', 'append1', 'dbTransformBBox', 'apply',
'upperCase', 'lowerCase', 'dbCreateRect', 'dbCreateVia', 'techFindViaDefByName', 'fix', 'infile', 'outfile',
'gets', 'print', 'printf', 'println', 'sprintf', 'fprintf', 'isFile', 'isFileName', 'isDir', 'close',
'parseString', 'symbolToString', 'stringToSymbol', 'substring', 'index', 'strcat', 'last', 'xcons', 'remove', 'member',
'stringp', 'blankstrp', 'artBlankString', 'buildString', 'parseString', 'evalstring', 'atof', 'atoi', 'artMakeString', 'symbolToString', 'stringToSymbol', 'substring', 'index', 'nindex', 'rindex', 'strcmp', 'strncmp', 'getchar', 'strcat', 'strncat', 'strlen', 'strpbrk', 'aelNumber',
];
// 创建用于匹配的正则表达式
const keywordAndFunctionRegex = new RegExp('\\b(' + lispKeywordsAndFunctions.join('|') + ')\\b', 'g');
const singleLineCommentRegex = /;.*/g; // 匹配分号开始到行尾的任何字符
const multiLineCommentRegex = /\/\*[\s\S]*?\*\//g; // 匹配/* */之间的任何字符，包括换行
const stringRegex = /"(?:\\.|[^"\\])*"/g; // 匹配双引号内的字符串，考虑转义字符
// 选择所有需要高亮的代码块
const codeBlocks = document.querySelectorAll('pre.code-block code');
codeBlocks.forEach(block => {
let code = block.textContent;
// 替换多行注释
// code = code.replace(multiLineCommentRegex, '<span class="lisp-comment">$&</span>');
// 替换单行注释
// code = code.replace(singleLineCommentRegex, '<span class="lisp-comment">$&</span>');
// 替换字符串
code = code.replace(stringRegex, '<span class="lisp-string">$&</span>');
// 替换关键字和函数名
code = code.replace(keywordAndFunctionRegex, '<span class="lisp-keyword">$&</span>');
block.innerHTML = code;
});
});
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：