英文:
Why isn't my downloaded font displaying correctly?
问题
I downloaded a font, and in a zip came multiple files. I followed the instruction in the .txt file, which told me to put it in as a font face. However, when I put it in, it looks nothing like the font I downloaded. Is this a thing with Chrome, and if it is, what do I do now? Also, is there an easier way to turn a Figma design into HTML CSS? It's always a pain.
CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap');
@font-face {
font-family: 'Spartan-MB-SemiBold', sans-serif;
src: url('./assets/Spartan-MB-SemiBold.ttf.woff') format('woff'),
url('./assets/Spartan-MB-SemiBold.ttf.svg') format('svg'),
url('./assets/Spartan-MB-SemiBold.ttf.eot'), format('embedded-opentype');
font-weight: normal;
font-style: sans-serif;
}
h1 {
font-family: 'Spartan-MB-SemiBold';
}
TAILWIND OUTPUT (some of it)
.font-spartan {
font-family: Spartan, sans-serif;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-title-text {
color: 579229;
}
@font-face {
font-family: 'Spartan-MB-SemiBold', sans-serif;
src: url('./assets/Spartan-MB-SemiBold.ttf.woff') format('woff'),
url('./assets/Spartan-MB-SemiBold.ttf.svg') format('svg'),
url('./assets/Spartan-MB-SemiBold.ttf.eot'), format('embedded-opentype');
font-weight: normal;
font-style: sans-serif;
}
h1 {
font-family: 'Spartan-MB-SemiBold';
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StudyConnect</title>
<link rel="stylesheet" href="./tailwind/output.css">
</head>
<body class="">
<nav class="w-100% h-10% text-2xl">
<div class="flex mx-auto px-4 flex items-center justify-between">
<div class="flex">
<img src="./assets/rocketpencilgreen-removebg-preview.png" alt="logo" class="h-16 w-16">
<h1 class="flex flex-end mt-4 bold font-spartan text-title-text">StudyConnect</h1>
</div>
</div>
</nav>
<div class="slide-1">
</div>
</body>
</html>
TAILWIND CONFIG
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["index.html"],
theme: {
extend: {
colors: {
'navbar-left': '#E8FFDA',
'navbar-right': '#67FB0D',
'title-text': '#579229',
'login-button': '#B9E198',
'login-text': '#102400',
'square-one': '#FFECA9',
'square-two': '#FF9393',
'square-three': '#93D3FF',
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
},
fontFamily: {
'league-spartan': ['League Spartan', 'sans-serif'],
'spartan': ['Spartan', 'sans-serif'],
},
},
},
plugins: [],
}
Hope this helps!
英文:
I downloaded a font, and in a zip came multiple files. I followed the instruction in the .txt file, which told me to put it in as a font face. However, when I put it in, it looks nothing like the font I downloaded. Is this a thing with Chrome, and if it is, what do I do now? Also, is there an easier way to turn a Figma design into HTML CSS? It's always a pain.
CSS:
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=League+Spartan&display=swap');
@font-face {
font-family: 'Spartan-MB-SemiBold', sans-serif;
src:url('./assets/Spartan-MB-SemiBold.ttf.woff') format('woff'),
url('./assets/Spartan-MB-SemiBold.ttf.svg') format('svg'),
url('./assets/Spartan-MB-SemiBold.ttf.eot'), format('embedded-opentype');
font-weight: normal;
font-style: sans-serif;
}
h1 {
font-family: 'Spartan-MB-SemiBold';
}
TAILWIND OUTPUT (some of it)
.font-spartan {
font-family: Spartan, sans-serif;
}
.text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.text-title-text {
color: 579229;
}
@font-face {
font-family: 'Spartan-MB-SemiBold', sans-serif;
src:url('./assets/Spartan-MB-SemiBold.ttf.woff') format('woff'),
url('./assets/Spartan-MB-SemiBold.ttf.svg') format('svg'),
url('./assets/Spartan-MB-SemiBold.ttf.eot'), format('embedded-opentype');
font-weight: normal;
font-style: sans-serif;
}
h1 {
font-family: 'Spartan-MB-SemiBold';
}
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>StudyConnect</title>
<link rel="stylesheet" href="./tailwind/output.css">
</head>
<body class="">
<nav class="w-100% h-10% text-2xl">
<div class="flex mx-auto px-4 flex items-center justify-between">
<div class="flex">
<img src="./assets/rocketpencilgreen-removebg-preview.png" alt="logo" class="h-16 w-16">
<h1 class="flex flex-end mt-4 bold font-spartan text-title-text">StudyConnect</h1>
</div>
</div>
</nav>
<div class="slide-1">
</div>
</body>
</html>
TAILWIND CONFIG
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["index.html"],
theme: {
extend: {
colors: {
'navbar-left': '#E8FFDA',
'navbar-right': '#67FB0D',
'title-text': '579229',
'login-button': '#B9E198',
'login-text': '#102400',
'square-one': '#FFECA9',
'square-two': '#FF9393',
'square-three': '#93D3FF',
},
backgroundImage: {
'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
},
fontFamily: {
'league-spartan': ['League Spartan', 'sans-serif'],
'spartan': ['Spartan', 'sans-serif'],
},
},
},
plugins: [],
}
Thanks!
答案1
得分: 0
这看起来不正确：
fontFamily: {
'league-spartan': ['League Spartan', 'sans-serif'],
'spartan': ['Spartan', 'sans-serif'],
},
尝试：
fontFamily: {
'spartan': ['Spartan-MB-SemiBold', 'sans-serif'],
},
如果需要进一步的帮助，请告诉我。
英文:
this looks wrong:
fontFamily: {
'league-spartan': ['League Spartan', 'sans-serif'],
'spartan': ['Spartan', 'sans-serif'],
},
try:
fontFamily: {
'spartan': ['Spartan-MB-SemiBold', 'sans-serif'],
},
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论