চিত্রক এসভিজি ফাইলে ফন্টের ধরণ সংরক্ষণ করা


24

হাই আমি চিত্রকের কাছে নতুন এবং একটি চিত্র তৈরি করেছি যা "স্কিয়া-নিয়মিত" ফন্ট ব্যবহার করে। তবে আমি যখন এই চিত্রটি .svg ফর্ম্যাটে সংরক্ষণ করি তখন এটি ফন্টের ধরণকে পরিবর্তন করে। এবং আমি ব্রাউজারে .svg ফর্ম্যাট ফাইলটি খুললে ফন্টটি সম্পূর্ণ আলাদা। কেউ কি দয়া করে আমাকে বলতে পারেন যে আমি কী ভুল করছি। আমি নোটপ্যাড ++ তেও .svg ফাইলটি খুললাম এবং এতে ফন্ট-পরিবার = "'স্কিয়া-রেগুলার' বলেছে তবে ফন্টটি স্কিয়া নিয়মিত নয় A যে কোনও সাহায্যের প্রশংসা করা হবে Thanks ধন্যবাদ

চিত্রটিও রেফারেন্সের জন্য সংযুক্ত রয়েছে চিত্র সংযুক্ত

উত্তর:


31

আপনি যদি নিশ্চিত হতে চান যে প্রতি ক্ষেত্রে পাঠ্যের একইরকম উপস্থিতি থাকবে -

প্রথমত, আপনি svg হিসাবে সংরক্ষণ করার আগে পাঠ্যটি প্রসারিত করতে পারেন

দ্বিতীয়ত, সংরক্ষণের কথোপকথনের ফন্ট অংশে আপনি "রূপরেখায় রূপান্তর করুন" টিপতে পারেন


2
দ্বিতীয় অংশটি পরিষ্কার। আপনি কি দয়া করে প্রথম অংশটি ব্যাখ্যা করতে পারেন, আমি কীভাবে পাঠটিকে "প্রসারিত" করব?
রিজওয়ান 606

5
@ রিজওয়ান 6০6 আপনি একটি নির্বাচন সরঞ্জামের সাহায্যে পাঠ্যটি নির্বাচন করেন এবং মেনু অবজেক্ট টিপুন এবং সেখানে আপনি প্রসারিত চাপুন (এটি পাঠ্যটিকে আকারগুলিতে রূপান্তরিত করবে), বিকল্পভাবে আপনি পাঠ্যটি নির্বাচন করুন এবং তারপরে রাইটক্লিক এবং আউটলাইনগুলি সরিয়ে দিন
ইলান

5
এই উত্তরটি পরিষ্কার করার জন্য, আপনার উভয়টি করার দরকার নেই। হয় পদ্ধতি স্বাধীনভাবে কাজ করবে।
সাইমন উডসাইড

⚙️ (রফতানি হওয়া ফাইল ধরণের জন্য উন্নত সেটিংস) → এসভিজি → "
রূপরেখায়

9

ফন্টটি প্রকৃত ফন্টের ধরণে সঠিকভাবে রেন্ডার না করার কারণ হ'ল ইলাস্ট্রেটর অ্যাপ্লিকেশন ব্যবহার করে এসভিজি সংরক্ষণ করা হয়। অ্যাপ্লিকেশনটি স্বয়ংক্রিয়ভাবে নকশাকে কোডে রূপান্তর করে। কোডের সাথে থাকা ফন্টের নামটি যদি ঘনিষ্ঠভাবে পর্যবেক্ষণ করা হয় তবে এটি সিস্টেমের মধ্যে ইনস্টল করা আসল ফন্টের সাথে মেলে না।

ফন্ট রেন্ডারিংয়ের সমস্যাটি কাটিয়ে ওঠার জন্য আপনাকে ইলাস্ট্রেটর থেকে এসভিজি কোডটি অনুলিপি করতে হবে এবং আপনার সিস্টেমে ইনস্টল করা ফন্টের নামের সাথে মেলে ফন্টের নামটি পরিবর্তন করতে হবে। (উদাহরণস্বরূপ: এসভিজি কোডের মধ্যে ফন্টের নাম যা ইলাস্ট্রেটর "আরিয়াল-নিয়মিত" থেকে আসে তবে আপনার সিস্টেমে ফন্টের নাম ইনস্টল করা হয় "আরিয়াল নিয়মিত" Here এখানে আপনাকে ফন্ট-পরিবার রাখতে কোডটি সংশোধন করতে হবে "আরিয়াল নিয়মিত" হিসাবে "।)

এটি আপনার সমস্যার সমাধান করবে ফন্টকে রূপরেখায় রূপান্তর না করেই।

আশাকরি এটা সাহায্য করবে!


1
ঠিক এটাই! আপনি যখন কোনও ফাইল> এসভিজি সংরক্ষণ এবং নির্বাচন করেন তখন ইলাস্ট্রেটর ফন্টগুলির জন্য পোস্টস্ক্রিপ্টের নামগুলি ব্যবহার করে। আপনি আশা করতে পারেন "মরিয়াড প্রো" এর পরিবর্তে "মরিয়াডপ্রো-নিয়মিত" দিয়ে শেষ করে এবং আপনার ব্রাউজার পোস্টস্ক্রিপ্টের নামগুলি ইলাস্ট্রেটারের মতো কাজ করে না। এসভিজিগুলি সংরক্ষণের জন্য ফাইল> রফতানি ব্যবহার করা একটি কার্যকারণ হ'ল এটি পোস্টস্ক্রিপ্ট নামের পরিবর্তে সঠিক পরিবারের নামটি রফতানি করবে।
মাইকেল থম্পসন

@ মিশেল থম্পসন যখন আমি ফাইল> রফতানি পছন্দ করি তখন এসভিজি বিকল্পগুলির মধ্যে একটি নয়। আমি সিএস 5 ব্যবহার করছি। এটি পূর্ববর্তী / পরবর্তী সংস্করণগুলির একটি বিকল্প?
ম্যাক্স স্টারকেনবার্গে

@ ম্যাক্স স্টারকেনবার্গ: রফতানির মেনু সংস্করণগুলির মধ্যে বন্যভাবে পরিবর্তিত হয়। নতুন সংস্করণগুলিতে এসভিজিতে সংরক্ষণ / রফতানি করার জন্য তিনটি উপায় রয়েছে: ফাইল> হিসাবে সংরক্ষণ করুন> (এসভিজি প্রকারটি চয়ন করুন); ফাইল> রফতানি করুন> হিসাবে রফতানি করুন ...> (এসভিজি ধরণ চয়ন করুন) এবং ফাইল> স্ক্রিনের জন্য রফতানি করুন (এসভিজি ফর্ম্যাট যুক্ত করুন)।
মাইকেল থম্পসন

4

যেমন আপনি উল্লেখ করেছেন, টাইপফেসটি হ'ল ফন্ট ফাইলের একটি রেফারেন্স যা এসভিজি খোলার চেষ্টা করে এমন সিস্টেমে উপলব্ধ (বা নাও) থাকতে পারে। সমাধানটি হ'ল আপনার ধরণকে পাথে রূপান্তর করা যাতে বক্ররেখাগুলি সুস্পষ্টভাবে ফাইলের মধ্যে সংরক্ষণ করা হয়।

আপনি যে ফন্টের মুখোমুখি হতে চাইছেন সে সম্পর্কে ব্রাউজার কেন সচেতন হতে পারে না, এটি অস্পষ্ট যেহেতু আমি ধারণা করছি যে আপনি এসভিজি ফাইলটি তৈরি করার সময় আপনি যে কম্পিউটারটি ব্যবহার করেছিলেন সেই একই কম্পিউটারে আপনি পরীক্ষা করছেন। এটি প্রশংসনীয় যে হরফ ইলাস্ট্রেটারের মধ্যে নির্বাচনযোগ্য তবে ওএস স্তরে আনুষ্ঠানিকভাবে ইনস্টল করা হয়নি।


হ্যাঁ আমি একই কম্পিউটারে পরীক্ষা করছি যা আমি এসভিজি ফাইল তৈরি করছি। আমি ভুল হলে আপনি কি আমাকে সংশোধন করতে পারেন? আমি ফন্ট-পরিবার সম্পত্তিতে স্কিয়া রেগুলার এর ফন্ট .tf ফাইলের জন্য নির্দিষ্ট পথ দিতে হবে বলে আমি জবাবের প্রথম অংশটি নিয়েছি?
রিজওয়ান 606

ইনস্টল করা ফন্টের সাথে টাইপফেসের নামটি মিলিয়ে ফেলা ব্রাউজারের উপর নির্ভর করে, তাই "না" আপনি এটি টিটিএফ-তে কোনও পথ দেবেন না। রেফারেন্সটি CSS ফন্ট-ফেস সিনট্যাক্সের অনুরূপ, যা ফন্ট-পরিবার শৈলীর কমা-বিচ্ছিন্ন তালিকার অনুমতি দেয়। ব্রাউজার ফন্টের নামটি আলাদাভাবে সনাক্ত করতে পারে।
হোরাটিও

নোট করুন যে লোগোগুলি এবং এই প্রকৃতির বিতরণকৃত বিষয়গুলির জন্য, (পিডিএফএস ইত্যাদির ক্ষেত্রে) যেখানে টাইপফেস গুরুত্বপূর্ণ, ফন্টটি এম্বেড করা বা পাথে রূপান্তর করা ভাল ধারণা। সুতরাং এই রেফারেন্সটি সমাধান করা ভাল সমাধান নাও হতে পারে কারণ আপনি যথাযথ টাইপফেসগুলি ইতিমধ্যে ইনস্টল করতে 3 য় পক্ষের উপর নির্ভর করেন
horatio

2

ওয়েবের জন্য সংরক্ষণাগার:

  1. গুগল ফন্ট ব্যবহার করুন।
  2. সর্বোচ্চ দুটি ফন্ট পরিবার ব্যবহার করে।

রফতানি: হরফ: (পাঠ্য: এসভিজি, সাবকনজেন্টো: কিছুই নয়)। প্রোপার্টি এসভিজি: (স্টাইল এলিমেন্ট)।

ফলাফল ফাইলের শৈলীর মধ্যে এটি সম্পাদনা করুন:

  1. সংযুক্ত লাইন "@ ইমপোর্ট"।
  2. সমস্ত ফন্ট-আকারের সাথে "px" সংযুক্ত করুন।
  3. হরফের নাম পরিবর্তন করুন।

ফলাফল:

<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700);
body {}

.st0{fill:#868686;}
.st1{font-family:'Roboto Condensed';}
.st2{font-size:14.414px;}
.st3{letter-spacing:55px;}
.st4{fill:#1D1D1B;}
.st5{font-family:'Roboto Condensed'; font-weight: 700;}
.st6{letter-spacing:51px;}
.st7{letter-spacing:45px;}
.st8{letter-spacing:40px;}


1
এই উত্তরটি খুব সংক্ষিপ্ত। এটি কোনও এসভিজি ফাইল বা অন্য কোনও সমাধান বোঝায় কিনা তা আমিও বলতে পারি না ...
জিগগুনজার

1

আপনার পিসিতে ফন্ট পরিবার (স্কিয়া-নিয়মিত) ফন্ট ফাইল স্থানীয়ভাবে উপলব্ধ নেই available সুতরাং আপনি যখন আপনার ব্রাউজারে আপনার এসভিজি ফাইলটি খুলেন, এটি ডিফল্ট সিস্টেম ফন্ট ব্যবহার করে রেন্ডার করে যা বেশিরভাগ সময় টাইমস নিউ রোমান। বেশ কয়েকটি কাজের ক্ষেত্র রয়েছে:

  1. গুগল ফন্টস এপিআই-তে উল্লেখ করতে ইমপোর্ট ব্যবহার করুন (তবে ধরুনটি কীভাবে আপনি নিজের ওয়েবসাইটে আপনার এসভিজি চিত্রগুলি এম্বেড করে তার উপর নির্ভর করে আপনি যদি ইনলাইন এসভিজি এবং অবজেক্ট ট্যাগ এসভিজি ব্যবহার করেন তবে এটি কেবল ভাল কাজ করে)
  2. আপনার ফন্টগুলিকে পথে রূপান্তর করুন (যা আপনার ফাইলের আকার বাড়ায় এবং ক্লিয়ারটাইপ রেন্ডারিং হারাতে গিয়ে ঝাপসা পাঠ্যের ফলস্বরূপ )
  3. ন্যানো ব্যবহার করে আপনার এসভিজি ফাইলে ফন্টগুলি এম্বেড করুন

আপনি এখানে এসভিজিতে কাস্টম ফন্টগুলি ব্যবহার করতে আরও পড়তে পারেন: https://css-tricks.com/used-custom-fouts-with-svg-in-an-image-tag/

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.