আমি React.js এবং ওয়েবপ্যাক দিয়ে একটি ওয়েবসাইট তৈরি করেছি ।
আমি ওয়েবপৃষ্ঠায় গুগল ফন্ট ব্যবহার করতে চাই , তাই আমি লিঙ্কটিটি বিভাগে রেখেছি।
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
body{
font-family: 'Bungee Inline', cursive;
}
যাইহোক, এটা কাজ করে না।
কিভাবে আমি এই সমস্যার সমাধান করতে পারে?
{ test: /(\.css$)/, loaders: ['style-loader', 'css-loader', 'postcss-loader'] }, { test: /\.(png|woff|woff2|eot|ttf|svg)$/, loader: 'url-loader?limit=100000' }
উত্তর:
কোনও ধরণের প্রধান বা প্রথম লোড করা সিএসএস ফাইলের মধ্যে কেবল করুন:
@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:regular,bold,italic&subset=latin,latin-ext');
আপনার কোনও ধরণের @ ফন্ট-ফেস ইত্যাদিতে মোড়ানোর দরকার নেই, গুগলের এপিআই থেকে ফিরে আসা প্রতিক্রিয়া আপনাকে প্রস্তুত এবং আপনাকে ফন্ট পরিবারগুলিকে স্বাভাবিকের মতো ব্যবহার করতে দেয়।
তারপরে আপনার প্রধান প্রতিক্রিয়া অ্যাপ্লিকেশন জাভাস্ক্রিপ্টে শীর্ষে এমন কিছু রাখুন:
import './assets/css/fonts.css';
আমি কি আসলে একটি তৈরি করা হয়েছিল হয়নি app.cssযে একটি আমদানিকৃত fonts.cssকয়েক ফন্ট আমদানির সঙ্গে। কেবল সংগঠনের জন্য (এখন আমি জানি যে আমার সমস্ত ফন্টগুলি কোথায়)। মনে রাখা গুরুত্বপূর্ণ বিষয়টি হ'ল আপনি হরফগুলি প্রথমে আমদানি করুন।
মনে রাখবেন যে আপনার প্রতিক্রিয়া অ্যাপটিতে আমদানি করা কোনও উপাদান শৈলী আমদানির পরে আমদানি করা উচিত। বিশেষত যদি সেই উপাদানগুলি তাদের নিজস্ব শৈলীগুলিও আমদানি করে। এইভাবে আপনি শৈলীর ক্রম সম্পর্কে নিশ্চিত হতে পারেন। এজন্য আপনার মূল ফাইলের শীর্ষে ফন্টগুলি আমদানি করা ভাল (আপনার সমস্যা হচ্ছে কিনা ডাবল চেক করতে আপনার চূড়ান্ত বান্ডিল সিএসএস ফাইলটি পরীক্ষা করতে ভুলবেন না)।
ফন্ট ইত্যাদি লোড করার সময় আপনি আরও কার্যকর হওয়ার জন্য গুগল ফন্ট এপিআই পাস করতে পারেন এমন কয়েকটি অপশন রয়েছে official সরকারী নথিপত্র দেখুন: গুগল ফন্ট এপিআই দিয়ে শুরু করুন
সম্পাদনা করুন, দ্রষ্টব্য: আপনি যদি কোনও "অফলাইন" অ্যাপ্লিকেশন নিয়ে কাজ করছেন, তবে আপনাকে অবশ্যই ফন্টগুলি ডাউনলোড করতে হবে এবং ওয়েবপ্যাকের মাধ্যমে লোড করতে হবে।
রিঅ্যাক্ট.জেজে গুগল ফন্ট?
আপনার স্টাইলশিটটি খুলুন, যেমন, app.css, style.css (আপনার নাম কি), এটি কোনও ব্যাপার নয়, কেবল স্টাইলশিটটি খুলুন এবং এই কোডটি আটকে দিন
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');
এবং আপনার যে ফন্টটি চান তা ইউআরএল পরিবর্তন করতে ভুলবেন না, অন্যথায় ভাল কাজ করছে
এবং এটি হিসাবে ব্যবহার করুন:
body {
font-family: 'Josefin Sans', cursive;
}
আপনি অ্যাপ পরিবেশ প্রতিক্রিয়া তৈরি করুন ব্যবহার করেন তাহলে কেবল নিয়ম @import যোগ index.css যেমন:
@import url('https://fonts.googleapis.com/css?family=Anton');
আপনার প্রধান প্রতিক্রিয়া অ্যাপ্লিকেশন ইনডেক্স.সিএস আমদানি করুন:
import './index.css'
প্রতিক্রিয়া আপনাকে সিএসএস প্রয়োগ করার জন্য ইনলাইন স্টাইলিং, সিএসএস মডিউল বা স্টাইলযুক্ত উপাদানগুলির একটি পছন্দ দেয়:
font-family: 'Anton', sans-serif;
আপনার এই টিউটোরিয়ালটি দেখতে হবে: https://scotch.io/@micwanyoike/how-to-add-fouts-to-a-react-project
import WebFont from 'webfontloader';
WebFont.load({
google: {
families: ['Titillium Web:300,400,700', 'sans-serif']
}
});
আমি কেবল এই পদ্ধতিটি চেষ্টা করেছি এবং আমি বলতে পারি যে এটি খুব ভালভাবে কাজ করে;)
আপনার সিএসএস ফাইলে, যেমন একটি ক্রিয়েট-রিএ্যাক্ট-অ্যাপ্লিকেশনটিতে App.css, একটি ফন্টফেস আমদানি যুক্ত করুন। উদাহরণ স্বরূপ:
@fontface {
font-family: 'Bungee Inline', cursive;
src: url('https://fonts.googleapis.com/css?family=Bungee+Inline')
}
তারপরে একই CSS ফাইলের মধ্যে DOM উপাদানটিতে ফন্টটি যুক্ত করুন।
body {
font-family: 'Bungee Inline', cursive;
}
আমি আমার সিএসএস ফাইলে @ ইম্পোর্ট এবং @ ফন্ট-মুখ যুক্ত করেছি এবং এটি কার্যকর হয়েছে।
@importচলা উচিত stackoverflow.com/questions/48057801/...
এখানে ভাল উত্তরের জন্য অন্য একটি বিকল্প হ'ল এনপিএম প্যাকেজ react-google-font-loader, এটি এখানে পাওয়া যায় ।
ব্যবহার সহজ:
import GoogleFontLoader from 'react-google-font-loader';
// Somewhere in your React tree:
<GoogleFontLoader
fonts={[
{
font: 'Bungee Inline',
weights: [400],
},
]}
/>
তারপরে আপনি নিজের সিএসএসে পরিবারের নামটি ব্যবহার করতে পারেন:
body {
font-family: 'Bungee Inline', cursive;
}
দাবি অস্বীকার: আমি react-google-font-loaderপ্যাকেজের লেখক ।
আপনার প্রতিক্রিয়া অ্যাপটিতে আপনি ফন্টগুলি যুক্ত করতে পারেন এমন দুটি ভিন্ন উপায়।
fontsআপনার srcফোল্ডারে একটি নতুন ফোল্ডার তৈরি করুন ।
স্থানীয়ভাবে গুগল ফন্টগুলি ডাউনলোড করুন এবং সেগুলি fontsফোল্ডারের ভিতরে রাখুন ।
আপনার index.cssফাইলটি খুলুন এবং পথটি উল্লেখ করে ফন্টটি অন্তর্ভুক্ত করুন।
@font-face {
font-family: 'Rajdhani';
src: local('Rajdhani'), url(./fonts/Rajdhani/Rajdhani-Regular.ttf) format('truetype');
}
এখানে আমি একটি Rajdhaniফন্ট যুক্ত করেছি।
এখন, আমরা আমাদের ফন্টটি এই জাতীয় CSS ক্লাসে ব্যবহার করতে পারি।
.title{
font-family: Rajdhani, serif;
color: #0004;
}
আপনি যদি স্থানীয় ফন্টের পরিবর্তে গুগল ফন্ট (এপিআই) ব্যবহার করতে চান তবে আপনি এটি এটি যুক্ত করতে পারেন।
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap');
একইভাবে, আপনি ট্যাগ index.htmlব্যবহার করে এটি ফাইলের অভ্যন্তরেও যুক্ত করতে পারেন link।
<link href="https://fonts.googleapis.com/css2?family=Rajdhani:wght@300;500&display=swap" rel="stylesheet">
(মূলত https://reactgo.com/add-fouts-to-react-app/ এ পোস্ট করা হয়েছে )
কিছু ক্ষেত্রে আপনার ফন্টের সংস্থান সম্ভবত আপনার প্রকল্প ডিরেক্টরিতে অন্য কোথাও। সুতরাং আপনি এসএসএসএস ব্যবহার করে এটি এ জাতীয় লোড করতে পারেন
$list: (
"Black",
"BlackItalic",
"Bold",
"BoldItalic",
"Italic",
"Light",
"LightItalic",
"Medium",
"MediumItalic",
"Regular",
"Thin",
"ThinItalic"
);
@mixin setRobotoFonts {
@each $var in $list {
@font-face {
font-family: "Roboto-#{$var}";
src: url("../fonts/Roboto-#{$var}.ttf") format("ttf");
}
}
}
@include setRobotoFonts();
<link>পৃষ্ঠার শিরোনামে রেখেছেন , আপনার প্রতিক্রিয়া অ্যাপটিতে নয়, সঠিক? আপনি কিfont-familyআপনার স্টাইলশীটের অন্য কোথাও বা আপনার উপাদানগুলিতে সরাসরি উল্লেখ করেছেন?