Question

我敢肯定，如果您像js小提琴一样看起来很模糊和有点垃圾，这可以改善。有什么提示可以使文本更清晰，更专业吗？

我正在考虑使用@font face导入字体，但是使用laravel-mix我可以在某个地方添加？

.btn-enquiry {
background-color: #C30030;    
height: 50px;
color: #ffffff;
font-family: Helvetica Neue LT Std;
border-width: 0;
font-size:20px;
border-radius: 40px;
margin-top:30px;
}

.btn-enquiry-no {
background-color: #ffffff;
border-color: #C30030;   
height: 50px;
color: #c30030;
font-family: Helvetica Neue LT Std;
border-width: 2px;
font-size:20px;
border-radius: 40px;
margin-top:30px;
}

<div class="container">
<div class="row">
<div class="col-sm-4">
<button class="button btn-block btn-enquiry">Yes</button>
<button class="button btn-block btn-enquiry-no">No</button>
</div>
</div>  
</div>

Answer 1

您可以使用url导入字体，例如：

@font-face {
   font-family: 'Calibri';
   font-style: italic;
   font-weight: 400;
   src: local('Calibri Italic'), local('Calibri-Italic'), 
   url(https://fonts.gstatic.com/l/font?kit=J7adnpV- 
   BGlaFfdAhLQo6btPMDoTpA&skey=36a3d5758e0e2f58&v=v9) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, 
   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, 
   U+FEFF, U+FFFD;
}

Answer 2

将下载的一些不同的字体添加到/ resources中的/ assets / fonts文件夹

将此添加到webpack.mix.js

let mix = require('laravel-mix');
mix.config.fileLoaderDirs.fonts = 'assets/fonts';

然后将其添加到我的自定义CSS文件

@font-face {
font-family: 'OpenSansRegular';
src: url('../assets/fonts/OpenSans-Regular-webfont.eot');
src: url('../assets/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('../assets/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('../assets/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;}

当它与npm和laravel一起编译时，混合效果很好！

如何使自举样式的按钮文本看起来更脏？

2 个答案: